Угловой контент не работает в Kendo Tab Strip

-1

Я не могу понять, почему удалить вкладку не вызывается, когда я использую ng-click, но он отлично работает в неграмотном режиме! Я передал справочную информацию в 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 «Виджет табеля не поддерживает выражения привязки 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 для компонентов, иначе u столкнется с анонимным поведением. Я исправил ваш код для добавления вкладок в угловом кендо.

2) Вы должны вызвать нг щелчок от атрибута содержимого, а не текстовый атрибут кендо-TabStrip

источник

2016-07-25 06:01:06 urvashi

Спасибо большое за ответ и усилия. Я должен держать кнопку (я буду менять их на кнопки значков) в области содержимого, чтобы пользователь мог их закрыть. Проверьте http://dojo.telerik.com/@datha_k/oNuBI/2, я использую две кнопки в области «текст». Проблема, с которой я сталкиваюсь в $ scope.removeTab() никогда не вызывается, но removeMeNonNg() вызывается для второй кнопки. – Datha

Угловой контент не работает в Kendo Tab Strip

ответ

Смежные вопросы