AngularJS インストラクションのインタラクション詳細及びサンプルコード

　　背景紹介

　　これはビデオの例です。動感超人が三つの能力、力strength、速度speed、光lightを持っています。

　　これら三つの能力は三つの属性として定義され、動感超人をタグとして定義し、対応する属性を追加することでその能力を持ちます。

　　結果の表示を簡単にするために、タグにマウスの応答イベントを追加しました。マウスが対応するタグに移動すると、その能力を印刷するメソッドがトリガーされます。

　　プログラムの分析
　　html部分のコードは以下の通りです：　　　　　　　

 <div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>

　　次に、モジュールを作成する方法を見てみましょう：

var myAppModule = angular.module("myApp",[]);

　　このモジュールの上に、supermanというタグを作成します。前と同様です。

myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>"
          controller:function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){
              $scope.abilities.push("speed");
            };
            this.addLight = function(){
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });

　　ここでの違いは、メソッド内部にcontroller属性があることです。これはngではありません。-controllerのようなコントローラーではなく、コマンドが公開するインターフェースです。内部に宣言されたメソッドは、外部から公開メソッドとして使用できます。他のコマンドは依存関係を通じてこれらのメソッドを使用できます。

　　次に、対応する三つの能力に対応するコマンドを作成します。

    myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });

　　三つのコマンドのコードはほぼ同じですが、requireは依存するコマンドを指定しています。

　　linkにsupermanCtrlというパラメータが追加されました。このパラメータはsupermanのcontrollerと推測されるため、supermanを使用して命名されています。+Ctrlの方法。

　　内部の原理を理解していないため、ここでは推測に過ぎませんが、実験で証明されたように、このパラメータの名前を変更するとエラーが発生します。

　　これらの3つのディレクティブを宣言すると、これらのディレクティブをsuperの属性として使用することができます。属性を指定すると、内部的なlinkメソッドがトリガーされ、superman中の公開されたメソッドが呼び出されます。　　

　　要約すると、ディレクティブのインタラクションプロセス：

　　1 まず基本的なディレクティブを作成し、controller属性の後に公開されるメソッドを追加します。

　　2 他のインタラクティブなディレクティブを作成する場合、require属性の後に対応するディレクティブ依存関係を追加し、linkで公開されたメソッドを呼び出します。

　　すべてのプログラムコード：

!doctype html
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>"
          controller:function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){
              $scope.abilities.push("speed");
            };
            this.addLight = function(){
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });
      myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });
    </script>
  </body>
</html>

　実行結果：

　　　　　　　 AngularJS コマンドのインタラクションに関する情報を整理しました。今後も関連する情報を追加していく予定です。皆様の本サイトへのサポートに感謝します！

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害を疑われる内容がある場合は、メールを送信していただければ幸いです：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。)

基礎教程