2

I have read many SO answer but couldn't resolve the problem.

I have a Javascript function that create HTML element like document.createElement(...)

This is a part of that function :

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

This function is called at the start of the application and create many rows so when the page is loaded the HTML generated by the function look like this : (this sample code is simplified to be more comprehensible)

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

The Angular controller :

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

At the end of the function when all elements are created I compile with :

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

But when I click on the button the "hello" is fired many times !

If I have 10 elements on the page and click on the first element it is fire 10 times, if I click on the second element it is fired 9 times and so on..

I have tried to move the ng-controller declaration inside the button button.setAttribute("ng-controller","ProjectController"); Or even in the <body> tag but I still get the same behavior.

Thanks for you help

4

1 に答える 1

2

controllerこれは、ディレクティブをコンパイルし、divをコンパイルする回数だけng-controller="ProjectController"インスタンスを登録 するdivをコンパイルしているためです。ProjectController

$compile(content.contents())(scope);コントローラー要素全体をコンパイルする代わりに行う必要があります。

ただしcompile、コンパイルしたい要素には正確に1つのルート要素が必要なため、要素にはルート要素が1つしかない必要があります。Other はそのルートの子要素である必要があります。

于 2015-09-09T15:41:53.787 に答える