AngularJS ディレクティブのバインディング戦略例の分析-jsチュートリアル-php.cn

AngularJS ディレクティブのバインディング戦略例の分析

高洛峰

リリース： 2016-12-24 09:51:25

オリジナル

1056 人が閲覧しました

この記事の例では、AngularJS ディレクティブのバインド戦略について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

前の記事では、命令がどのように独立したスコープを生成するかを説明しました。このセクションでは、スコープ内のバインディング戦略を詳しく見ていきます。

一般に、スコープバインディング戦略は 3 つのタイプに分けられます:

(1)@: バインディング文字列

(2)=: 親コントローラーとの双方向バインディング

(3)&: 使用される関数の呼び出し親スコープ

1. 基本メソッド

<test word="{{wordCtrl}}"></test>

ログイン後にコピー

app.controller(&#39;myController1&#39;,[&#39;$scope&#39;,function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});

ログイン後にコピー

表示効果:

AngularJS ディレクティブのバインディング戦略例の分析

これは、スコープ内の文字列のバインドを実現する最も基本的なメソッドです

2.上記のメソッドを書き換えると

app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      word:&#39;@&#39;
     },
     template:"<div>{{word}}</div>",
    }
});

ログイン後にコピー

link 関数を削除して @binding を追加することで、命令内のプロパティを命令スコープの文字列に正常にバインドできます。

3. ‘=’ バインディング

= バインディングを使用すると、命令のスコープ内の値を変更するだけでなく、親コントローラー内の値も変更して双方向バインディングを実現できます。

例:


   ctrl:
   

<test word="{{wordCtrl}}"></test>

ログイン後にコピー

app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      word:&#39;@&#39;
     },
     template:"directive:<input ng-model=&#39;word&#39; />",
    }
});

ログイン後にコピー

その結果、命令内のスコープの値を変更すると、コントローラー内の対応する変数の値も変更され、双方向接続が実現されます。命令内のコントローラーとスコープの間。

効果は以下の通りです:

AngularJS ディレクティブのバインディング戦略例の分析

3. ‘&’メソッド

<test greet="sayHello()"></test>

ログイン後にコピー

app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      greet:&#39;&&#39;
     },
     template:"<div ng-click=&#39;sayHello({name:&#39;yuxiaoliang&#39;})&#39;>点击说HELLO</div>",
    }
});

ログイン後にコピー

パラメータの受け渡し方法に注意してください。

この記事が AngularJS プログラミングに携わるすべての人に役立つことを願っています。

AngularJS 命令のバインディング戦略例の分析に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。