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

但是当我点击按钮时，＆＃34;你好＆＃34;多次被解雇！

如果我在页面上有 10个元素并点击第一个元素，那么它会点亮 10次，如果我点击第二元素被解雇 9次等等..

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

谢谢你的帮助

编译

0 个答案: