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

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 指令，向模板中添加具有 ng 模型的元素

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);
  }
}