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