Call function which is added dynamically from controller

Question

for (var i = 'A', k = 1; i <= 'Z', k <= $scope.noOfColumns; i = $scope.nextChar(i), k++)
{
    for (var j = 1; j <= $scope.noOfSeatsperRow; j++)
    {
        seats += '<div id=' + i + '' + j + ' class="seat" ng-click="selectOrDeselect($event)">'+ i + '' + j + '</div>';
        if (j == $scope.noOfSeatsperRow)
        {
            seats += '<br />';
        }
        if (j == $scope.noOfSeatsperRow/2)
        {
            seats += '<div class="gap"></div>';
        }
    }
}
angular.element(document.getElementsByClassName("seats")).html(seats);

Here I am appending some HTML to pre-existing element. The problem is whenever I click ng-click event should invoke but it is not happening

I tried by giving statically in the view using for loop of razor there I can get the ng-click event invoked

What was the problem and how can I overcome with this?

...What is this? Why aren't you using a standard `ngRepeat` for this sort of thing? — Makoto, Mar 30 '17 at 16:50
This is not displaying data this is to add some div tags to the existing html @Makoto — Sravani, Mar 30 '17 at 17:12
...but you're doing this in a controller, and not in the DOM (where you can invoke repeats on a collection) or in a directive (where DOM manipulation actually makes *sense* to do). — Makoto, Mar 30 '17 at 17:19
Then it is a wrong approach? How can I make this correct.... Could you please help @Makoto — Sravani, Mar 31 '17 at 02:06

score 0 · Accepted Answer · answered Mar 31 '17 at 07:04

for (var i = 'A', k = 1; i <= 'Z', k <= $scope.noOfColumns; i = $scope.nextChar(i), k++)
{
    for (var j = 1; j <= $scope.noOfSeatsperRow; j++)
    {
        seats += '<div id=' + i + '' + j + ' class="seat" ng-click="selectOrDeselect($event)">' + i + '' + j + '</div>';
        if (j == $scope.noOfSeatsperRow)
        {
            seats += '<br />';
        }
        if (j == $scope.noOfSeatsperRow/2)
        {
            seats += '<div class="gap"></div>';
        }
    }
}

angular.element(document.getElementsByClassName("seats")).append($compile(seats)($scope));

I got the solution using "append($compile(seats)($scope));" made that.

Call function which is added dynamically from controller

1 Answers1