2

我已经阅读了很多 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>

角控制器：

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

但是当我点击按钮时，“你好”被触发了很多次！

如果我在页面上有10 个元素并单击第一个元素会触发10 次，如果我单击第二个元素会触发9 次，依此类推..

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

谢谢你的帮助

4

1 回答 1

2

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

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

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

于 2015-09-09T15:41:53.787 回答