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

高洛峰
リリース: 2017-03-25 16:11:50
オリジナル
1335 人が閲覧しました

この記事の例では、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(&#39;myText&#39;,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はモジュールと依存関係を動的にロードする

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート