编译后 ng-click 多次触发

Question

我已经阅读了很多SO答案，但无法解决问题。

我有一个 Javascript function 可以创建 HTML 元素，例如 document.createElement(...)

这是该功能的一部分：

var div=document.getElementById(params.wrapper);
div.setAttribute("ng-controller","ProjectController");

var button = document.createElement('button');
button.setAttribute('id','btn-view-users-' + params.id);
button.className='button-manage-user';
button.setAttribute('ng-click','hello()');
div.appendChild(button);

此函数在应用程序启动时调用并创建许多行，因此在加载页面时，函数生成的 HTML 如下所示：（此示例代码已简化更容易理解)

<div id="wrapper" class="wrapper ng-scope" ng-controller="ProjectController">
    <button id="btn-view-users-310" class="button-manage-user" ng-click="hello()">Manage Users</button>
    <button id="btn-view-users-311" class="button-manage-user" ng-click="hello()">Manage Users</button>
    <button id="btn-view-users-312" class="button-manage-user" ng-click="hello()">Manage Users</button>
    <button id="btn-view-users-313" class="button-manage-user" ng-click="hello()">Manage Users</button>
</div>

Angular 控制器：

app.controller('ProjectController',
    ['$scope', '$http',
        function($scope, $http) {
             $scope.hello = function(){
                console.log("hello")
             }
        }
    ]
)

在创建所有元素的函数结束时，我使用 :

进行编译

var content = $(".wrapper");
angular.element(document).injector().invoke(function($compile) {
    var scope = angular.element(content).scope();
    $compile(content)(scope);
    console.log("#compile")//log appears in the console 10 times if 10 elements are created.
});

但是当我点击按钮时 "hello" 被触发了很多次！

如果我在页面上有 10 个元素，然后单击 第一个 元素，它会触发 10 次，如果我点击 second 元素，它会被触发 9 次 等等。

我尝试将 ng-controller 声明移到按钮 button.setAttribute("ng-controller","ProjectController"); 中，甚至移到 <body> 标记中，但我仍然得到相同的行为。

谢谢你的帮助

Answer 1

这是因为您正在编译 controller div，它将执行编译 ng-controller="ProjectController" 指令并会在您编译 ProjectController 的次数中注册您的 ProjectController 实例=21=].

您应该 $compile(content.contents())(scope); 而不是编译整个控制器元素。

但是 compile 元素应该只有一个根元素，就像在你的情况下你不能那样做，因为你想要编译的元素应该只有一个根元素。其他应该是该根的子元素。

编译后 ng-click 多次触发

ng-click fired multiple times after compile

javascript

dom

angularjs

angularjs-scope

angularjs-compile