-1

我无法弄清楚为什么当我使用 ng-click 时没有调用删除选项卡，但它以非 Angular 方式工作正常！我参考了http://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/AngularJS/add-new-tabs-dynamically.html中的帮助。

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

我认为我的问题与http://www.telerik.com/forums/use-angularjs-directive-in-tab-content上的讨论有关“tabstrip 小部件不支持 angularjs 绑定表达式”。有什么建议可以解决吗？

4

1 回答 1

0

嗨，由于某种原因我无法登录 DOJO 来编辑你的代码，下面的代码可以工作 -

  <!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 作为组件，否则你将面临匿名行为。我已经更正了你在 angular kendo 中附加标签的代码。

2）您必须从内容属性调用 ng-click 而不是 kendo-tabstrip 的文本属性

于 2016-07-25T06:01:06.947 回答