Question

我有一个kendo-ui面板栏，我正在动态添加项目，我没有得到这些项目的ng-click事件。

这是我提取项目并附加到面板栏。

$http.get("/people").success(function (data) {
    var arr = [];
    if (data.success) {
        $.each(data.result, function (k, v) {
            var item = {
                text: v.name,
                items: [{
                    text: 'email: ' + v.email
                }, {
                    text: '<div><button class="k-button" ng-click="edit()">Edit</button></div>',
                    encoded: false

                }]
            };
            arr.push(item);

        });
        usersPanelBar.append(arr, usersPanelBar.element.children("li:last"));
    }
});

这是我的控制器

function userController($scope, $http, $location, $cookieStore) {
    $scope.edit = function () {
        alert("Will this work?");
        //not workng
    };
}

Answer 1

您需要使用$compile服务将您添加的少量代码段绑定到范围。您可以在此处找到示例 - angular, in directive, adding to the template an element with ng model

Answer 2

如何将这样的内容添加到usersPanelBar

<div ng-repeat="item in items">
    Email: {{item.email}}
    <div><button ng-click="edit()">Edit</button></div>
</div>

并将所有检索到的数据推送到items数组

function(data) {
    if(data.success) {
        $scope.items = data.result;
    }
});

有意义吗？

Answer 3

app.controller('TestController', function ($compile, $scope) {

  $scope.AppendDetailSuites = function () {
    var html = 'button type="button" id="btn" ng-click="LoadContiguousSuite(' + SuiteId + ');" class="btn btn-white btn-sm"  >Edit</button> ';
    var updatedhtml = $compile(html)($scope);
    $("#tbDetailContiguous").append(updatedhtml);
  }
}

AngularJS ng-click不适用于动态附加的kendo面板栏

3 个答案: