컴파일 후 ng-click이 여러 번 실행 됨

멀린

나는 많은 대답을 읽었지만 문제를 해결할 수 없었습니다.

나는 다음 과 같은 요소 Javascript function를 만들었습니다.HTMLdocument.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 회 내가 클릭하면, 두 번째 는 해고 요소 9 번 등등과 ..

ng-controller선언을 버튼 내부 button.setAttribute("ng-controller","ProjectController");또는 <body>태그 내부 로 이동하려고 시도 했지만 여전히 동일한 동작을 얻습니다.

도와 주셔서 감사합니다

판 카이 파카

controllerdiv를 컴파일하고 있기 때문에 div를 컴파일하고 컴파일 ng-controller="ProjectController"지시문 을 수행 ProjectController하고 div를 컴파일하는 횟수만큼 인스턴스를 등록합니다 .

$compile(content.contents())(scope);전체 컨트롤러 요소를 컴파일하는 대신 수행해야합니다 .

그러나 compile요소에는 루트 요소가 하나만 있어야합니다. 컴파일하려는 요소에는 정확히 하나의 루트 요소가 있어야하기 때문에 그렇게 할 수 없습니다. 기타는 해당 루트의 하위 요소 여야합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

GTM 콜백이 여러 번 실행 됨

분류에서Dev

NSUrlConnection이 여러 번 실행 됨

분류에서Dev

Drools : 규칙이 여러 번 실행 됨

분류에서Dev

Gulp 작업이 여러 번 실행 됨

분류에서Dev

문제 : Meteor 서버가 시작된 후 cron 루틴이 여러 번 실행 됨

분류에서Dev

컴파일 시도 후 AngularJS ng-click이 실행되지 않음

분류에서Dev

Bat 파일 서비스가 여러 번 실행 됨

분류에서Dev

데이터 가져 오기 성공 후 이벤트 클릭이 여러 번 실행 됨

분류에서Dev

JQuery.click ()에서 Meteor 클래스가 여러 번 실행 됨

분류에서Dev

비동기 이벤트 핸들러가 여러 번 실행 됨

분류에서Dev

CRM 플러그인이 여러 번 실행 됨

분류에서Dev

ul li 내부에서 여러 번 ng-click 실행

분류에서Dev

Blazor 버튼 이벤트가 여러 번 실행 됨

분류에서Dev

클릭 이벤트 리스너가 여러 번 실행 됨

분류에서Dev

after_touch 콜백이 여러 번 실행 됨

분류에서Dev

after_touch 콜백이 여러 번 실행 됨

분류에서Dev

jquery ajax 호출이 여러 번 실행 됨

분류에서Dev

Onclick 이벤트가 여러 번 실행 됨

분류에서Dev

마우스 이벤트가 여러 번 실행 됨

분류에서Dev

jQuery 이벤트 리스너가 여러 번 실행 됨

분류에서Dev

ngDialog closed 이벤트가 여러 번 실행 됨 (AngularJS)

분류에서Dev

클릭 이벤트가 여러 번 실행 됨

분류에서Dev

Ziggeo : 제출 된 이벤트가 여러 번 실행 됨

분류에서Dev

Laravel 작업이 대기열에서 여러 번 실행 됨

분류에서Dev

jQuery가 여러 번 실행 됨

분류에서Dev

CTE가 여러 번 실행 됨

분류에서Dev

PropertyChangedEvent가 여러 번 실행 됨

분류에서Dev

ComponentDidUpdate가 업데이트 당 한 번이 아니라 여러 번 실행 됨

분류에서Dev

파이썬. 실행 명령이 다르기 때문에 코드가 여러 번 반복됨

Related 관련 기사

  1. 1

    GTM 콜백이 여러 번 실행 됨

  2. 2

    NSUrlConnection이 여러 번 실행 됨

  3. 3

    Drools : 규칙이 여러 번 실행 됨

  4. 4

    Gulp 작업이 여러 번 실행 됨

  5. 5

    문제 : Meteor 서버가 시작된 후 cron 루틴이 여러 번 실행 됨

  6. 6

    컴파일 시도 후 AngularJS ng-click이 실행되지 않음

  7. 7

    Bat 파일 서비스가 여러 번 실행 됨

  8. 8

    데이터 가져 오기 성공 후 이벤트 클릭이 여러 번 실행 됨

  9. 9

    JQuery.click ()에서 Meteor 클래스가 여러 번 실행 됨

  10. 10

    비동기 이벤트 핸들러가 여러 번 실행 됨

  11. 11

    CRM 플러그인이 여러 번 실행 됨

  12. 12

    ul li 내부에서 여러 번 ng-click 실행

  13. 13

    Blazor 버튼 이벤트가 여러 번 실행 됨

  14. 14

    클릭 이벤트 리스너가 여러 번 실행 됨

  15. 15

    after_touch 콜백이 여러 번 실행 됨

  16. 16

    after_touch 콜백이 여러 번 실행 됨

  17. 17

    jquery ajax 호출이 여러 번 실행 됨

  18. 18

    Onclick 이벤트가 여러 번 실행 됨

  19. 19

    마우스 이벤트가 여러 번 실행 됨

  20. 20

    jQuery 이벤트 리스너가 여러 번 실행 됨

  21. 21

    ngDialog closed 이벤트가 여러 번 실행 됨 (AngularJS)

  22. 22

    클릭 이벤트가 여러 번 실행 됨

  23. 23

    Ziggeo : 제출 된 이벤트가 여러 번 실행 됨

  24. 24

    Laravel 작업이 대기열에서 여러 번 실행 됨

  25. 25

    jQuery가 여러 번 실행 됨

  26. 26

    CTE가 여러 번 실행 됨

  27. 27

    PropertyChangedEvent가 여러 번 실행 됨

  28. 28

    ComponentDidUpdate가 업데이트 당 한 번이 아니라 여러 번 실행 됨

  29. 29

    파이썬. 실행 명령이 다르기 때문에 코드가 여러 번 반복됨

뜨겁다태그

보관