I have a kendo-ui panelbar and i am dynamically adding items to it, I dont get the ng-click event for those items.

here is I am fetching items and appending to panelbar.

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

This is my controller

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

I have a kendo-ui panelbar and i am dynamically adding items to it, I dont get the ng-click event for those items.

here is I am fetching items and appending to panelbar.

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

This is my controller

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

• javascript
• angularjs
• kendo-ui

3 Answers 3

You need to use $pile service to tie your little added snippet to the scope. You may find an example here - angular, in directive, adding to the template an element with ng model

How about to add something like this to your usersPanelBar

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

And push all retrieved data in the items array

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

Does it make sense?

app.controller('TestController', function ($pile, $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 = $pile(html)($scope);
    $("#tbDetailContiguous").append(updatedhtml);
  }
}