角度内容在Kendo Tab Strip中不起作用

-1

我无法弄清楚为什么在使用ng-click时不会调用remove tab，但它在非角度方式下工作正常！我参考了http://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/AngularJS/add-new-tabs-dynamically.html中提供的帮助。角度内容在Kendo Tab Strip中不起作用

我在dojo.telerik.com/@datha_k/oNuBI上编写了代码。我在这里无知，尝试了很多，请帮助。

我认为我的问题与此讨论相关http://www.telerik.com/forums/use-angularjs-directive-in-tab-content'tabstrip widget不支持angularjs绑定表达式'。任何解决方法建议？

来源

2016-07-25 Datha

http://dojo.telerik.com/@datha_k/oNuBI – Datha

嗨，由于某些原因无法即时在道场登录编辑我们的代码，下面的代码将工作 -

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/tabstrip/index"> 
    <style> 
     html { 
      font-size: 14px; 
      font-family: Arial, Helvetica, sans-serif; 
     } 
    </style> 
    <title></title> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" /> 

    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="example" ng-app="app-myapp" ng-controller="my-controller as my"> 
     <button ng-click="newTab($event)">Click to add new tab</button>{{show}} 
     <hr /> 
     <div kendo-tab-strip="tabstrip" id="tabstrip" k-options="tabOptions"></div> 
    </div> 
    <script> 
     function removeMeNonNg(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      var item = $(e.target).closest(".k-item"); 
      var tabstrip = $("#tabstrip").data("kendoTabStrip"); 
      tabstrip.remove(item.index()); 
      tabstrip.select(0); 
     } 
     angular.module("app-myapp", ["kendo.directives"]) // Create module and pass kendo dependency 
      .controller("my-controller", function ($scope, $timeout) { // Create controller 
       var index = 1; 
       $scope.tabOptions = { 
        dataTextField: "text", 
        dataContentField: "content", 
        dataSource: [{ 
         text: index, 
         content: '<div>Hello World!</div>' + index 
        }] 
       }; // tabOptions 
       $scope.newTab = function newTab(event) { 
        index++; 
        $scope.tabstrip.append({ 
         text: index + ' <button onclick="removeMeNonNg(event)">Remove me in non NG!</button> ', 
         encoded: false, 
         content: '<div><button ng-click="removeTab(\''+index+'\')">Remove me!</button>Hello World, Again!</div>' + index 
        }); 
       }; // newtab 

       $scope.removeTab = function (index) { 
        $scope.tabstrip.remove(index-1); 
       }; 

       $timeout(function() { 
        $("#tabstrip").data("kendoTabStrip").select(0); 
       }, 50); 
      }); 
    </script> 
</body> 
</html>

与您的代码的问题是2-

1）要么使用jquery或ANgular的组件，否则你将面临匿名behaviour.I已更正您的代码在角剑道追加选项卡。从内容属性和剑道，标签栏的不文本属性

2）你必须调用NG单击

来源

2016-07-25 06:01:06 urvashi

非常感谢答案，努力。我必须在内容区域保留按钮（我将它们更改为图标按钮），以便用户可以关闭它们。检查http://dojo.telerik.com/@datha_k/oNuBI/2，我在'文本'区域使用了两个按钮。我在$ scope.removeTab（）中面临的问题永远不会被调用，但会调用第二个按钮的removeMeNonNg（）。 – Datha

角度内容在Kendo Tab Strip中不起作用

回答

相关问题