angularjs中动态创建元素的单击功能答案

【问题标题】：click function for dynamically created element in angularjsangularjs中动态创建元素的单击功能
【发布时间】：2016-09-01 00:28:03
【问题描述】：

我的应用中的点击功能不适用于 angular js 中动态创建的元素。

这是我的代码：

HTML 代码

<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 代码：在表格中，当我点击“点击按钮”时，没有得到我想要的功能。

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

【问题讨论】：

我们需要更多信息。您是否在视图中包含了 .js 文件？控制台有错误吗？
不应该是console.alert()吗？
是的。我在我的应用程序中包含 angular.js 和 Sanitize.js 文件。控制台没有错误。请在以下路径中找到代码：jsfiddle.net/habibullah/vkby5fkt/14 谢谢

标签： angularjs

【解决方案1】：

您可以在 stackoverflow 上找到有关此问题的大量信息。

简而言之，您可以创建自己的指令或安装this one

angular-bind-html-compile

将其作为依赖项包含到您的应用程序中：

angular-bind-html-compile

并将其称为

bind-html-compile

在代码中会是这样的：

<!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>

我创建了一个plunker

【讨论】：

非常感谢老兄.. 它的工作。我将在明天之前申请我的代码.. :)