AngularJS는 동적으로 생성된 요소에 이벤트를 바인딩하는 방법을 구현합니다.

이 기사의 예에서는 AngularJS가 동적으로 생성된 요소에 바인딩 이벤트를 구현하는 방법을 설명합니다. 다음과 같이 참조용으로 모든 사람과 공유하세요.

1. jQuery에서는 요소가 동적으로 생성되는 동안 이벤트를 동적으로 바인딩하려는 경우 live/ on 메소드 ( jquery3.0에서는 바인딩 메소드가 폐지되었습니다.)

2. AngularJS에서 DOM 작동은 일반적으로 명령에서 완료됩니다. 이벤트 수신 메커니즘은 이벤트를 정적으로 생성된 DOM에 바인딩하는 것입니다. JS 이벤트로 모니터링됩니다.

예:

angular.module('myapp',[])
.directive('myText',function(){
  return{
    restrict:'A',
    template:&#39;<p ng-click="hello()">Hi everyone</p>&#39;,
    link:function(scope,ele,attr){
    }
  }
})

이 명령에서는 새 DOM 노드가 생성됩니다.

<p ng-click="hello()">Hi everyone</p>

그러나 처리가 수행되지 않으면 ng-click 여기서는 정적 HTML 페이지 생성 시 이벤트 모니터링이 완료되어 이벤트를 구현할 수 없습니다. 그렇다면 동적으로 생성된 요소에 이벤트를 바인딩하고 이벤트의 동적 모니터링을 구현하는 방법은 무엇입니까?

3. $compile 서비스를 통해 DOM을 컴파일하여 동적 이벤트 바인딩을 구현합니다.

var template:'<p ng-click="hello()">Hi everyone</p>',
var content = $compile(template)(scope);

이 두 문장을 통해 먼저 DOM을 컴파일한 다음 컴파일된 DOM을 사용하여 이전 정적 노드에서는 동적 바인딩 이벤트를 구현할 수 있습니다. $compile 서비스를 삽입해야 합니다

.directive('myText',function($compile){})

전체 코드는 다음과 같습니다. 모두 AngularJS 프로그래밍이 도움이 됩니다.

angular.module('myapp',[])
.directive('myText',function($compile){
  var template:'<p ng-click="hello()">Hi everyone</p>',
  return{
    restrict:'A',
    link:function(scope,ele,attr){
       ele.on("click", function() {
        scope.$apply(function() {
          var content = $compile(template)(scope);
          element.append(content);
        })
      });
    }
  }
})

AngularJS가 동적으로 생성된 요소에 바인딩 이벤트를 구현하는 방법에 대한 자세한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!

관련 기사:

AngularJS는 동적 컴파일 및 dom에 추가하는 방법을 구현합니다.

AngularJS는 div의 ID를 동적으로 생성합니다

AngularJ는 모듈과 종속성을 동적으로 로드합니다