AngularJS は動的に生成された要素にイベントをバインドするメソッドを実装します

この記事の例では、AngularJS が動的に生成された要素へのバインディング イベントを実装する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

1. jQuery では、要素が動的に生成されることがわかっています。要素を動的に生成するときにイベントを動的にバインドしたい場合は、live/on を使用できます。メソッド（jquery3.0ではbindメソッドが廃止されました）。

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

これら 2 つの文を通じて、まず DOM をコンパイルし、次にコンパイルされた DOM を使用して前の静的ノードに追加し、動的バインディングを実現します。特定のイベントなどは $compile サービスに挿入する必要があります

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

完全なコードは次のとおりです:

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 プログラミングのすべての人に役立つことを願っています。

AngularJS が動的に生成された要素へのバインディング イベントを実装する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。

関連記事:

AngularJSは動的コンパイルとdomへの追加方法を実装

AngularJSはdivのIDを動的に生成する

AngularJsはモジュールと依存関係を動的にロードする