Habib Habib - 3 months ago 14
AngularJS Question

click function for dynamically created element in angularjs

The click functionality in my app is not working for dynamically created elements in angular js.

Here's my code:

HTML Code

<div ng-app="myApp" ng-controller="myCtl">
<p>
Click is not working in table
</p>
<table border="1">
<tr ng-repeat="value in person.records">
<td>{{value.firstname}}</td>
<td>{{value.age}}</td>
<td ng-bind-html="value.button"></td>
</tr>
</table><br />
<br />
<p>
When I click on Click button, My function should be call like below
</p>
<button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button>

</div>


JS Code: In the table, when I click on "click button", I'm not getting the functionality I want.

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtl", function($scope, $sce) {
$scope.trailClick = function() {
alert('Clicked ');
}
$scope.person = {
"records": [{
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
}, {
firstname: "Dev",
lastname: "Raj",
age: 50,
eyecolor: "black"
}]
};

var cln_btn = '<button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button>';
for (var x = 0; x < $scope.person.records.length; x++) {
$scope.person.records[x].button = $sce.trustAsHtml(cln_btn);
}
});

Answer

You can find plenty of information about this issue looking on stackoverflow.

In short you can create your own directive or install this one

angular-bind-html-compile

include it to your application as a dependency:

angular-bind-html-compile

and call it as

bind-html-compile

In code would be like:

<!DOCTYPE html>
<html>
<head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="ngSanitize@1.3.15" data-semver="1.3.15" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
    <script src="angular-bind-html-compile.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
    var app = angular.module("myApp", ['ngSanitize', 'angular-bind-html-compile']);
    app.controller("myCtl", function($scope, $sce, $compile) {
        $scope.trailClick = function() {
            alert('Clicked ');
        }
        $scope.person = {
            "records": [{
                firstname: "John",
                lastname: "Doe",
                age: 50,
                eyecolor: "blue"
            }, {
                firstname: "Dev",
                lastname: "Raj",
                age: 50,
                eyecolor: "black"
            }]
        };
        var cln_btn = '<button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button>';
        for (var x = 0; x < $scope.person.records.length; x++) {
            $scope.person.records[x].button = $sce.trustAsHtml(cln_btn);
        }
    });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtl">
        <p>
            Click is not working in table
        </p>
        <table border="1">
            <tbody>
                <tr ng-repeat="value in person.records">
                    <td>{{value.firstname}}</td>
                    <td>{{value.age}}</td>
                    <td bind-html-compile="value.button"></td>
                </tr>
            </tbody>
        </table>
        <br />
        <br />
        <p>
            When I click on Click button, My function should be call like below
        </p>
        <button class="btn btn-primary" type="button" ng-click="trailClick()">Click</button>
    </div>
</body>
</html>

I've created a plunker

Comments