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

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

怎么样对这样的项目阵列中添加到您的usersPanelBar

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

，推动所有检索到的数据

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

是否有意义？

Answer 2

您需要使用$compile服务，让您的小片段加入到领带的范围。 您可以在这里找到一个例子 - angular, in directive, adding to the template an element with ng model

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