角度內容在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中不起作用

回答

相關問題