angularjs でコントローラーと命令の間の対話を実装する方法のサンプルコード-jsチュートリアル-php.cn

angularjs でコントローラーと命令の間の対話を実装する方法のサンプルコード

黄舟

リリース： 2017-06-01 09:34:42

オリジナル

1070 人が閲覧しました

この記事では主に angular js での controller のインタラクションの実装方法について詳しく説明します。興味のある方は参考にしてください

次の DOM 構造がある場合:

  <p ng-controller="MyCtrl"> 
   <loader>滑动加载</loader> 
</p>

ログイン後にコピー

同時に、コントローラーには次の署名があります:

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]);

ログイン後にコピー

同時に、命令の署名は次のとおりです:

myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind(&#39;mouseenter&#39;, function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
      }); 
    } 
  }  
});

ログイン後にコピー

この時点で、命令はスコープを通じてコントローラーへの呼び出しを完了できます。 .loadData またはscope.$apply 。しかし、2 つのコントローラーがあり、$scope のメソッドが 2 つのコントローラーで異なる場合はどうなるでしょうか?

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]);

ログイン後にコピー

この時点で、上記のメソッドに従うと、問題が発生します。には、loadData はありませんが、loadData2 のみがあります! 現時点では、次の命令を使用して属性をカスタマイズする必要があります!

2 つのコントローラーコントローラー、つまり MyCtrl と MyCtrl2 を定義しました。両方のコントローラーには、独自に定義された命令を使用します。 load:

<!doctype html> 
<html ng-app="MyModule"> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
  <body> 
  <!--第一个控制器MyCtrl--> 
    <p ng-controller="MyCtrl"> 
      <loader howToLoad="loadData()">滑动加载</loader> 
    </p> 
    <!--第二个控制器MyCtrl2--> 
    <p ng-controller="MyCtrl2"> 
      <loader howToLoad="loadData2()">滑动加载</loader> 
    </p> 
  </body> 
  <script src="framework/angular-1.3.0.14/angular.js"></script> 
  <script src="Directive&Controller.js"></script> 
</html>

ログイン後にコピー

コントローラーコードを次のようにカスタマイズしました:

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]); 
//在模块下挂载一个loader指令 
myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
        // scope.$apply(attrs.howtoload); 
        //其中scope为POJO，但是有一系列的工具方法如$watch,$apply等 
      }); 
    } 
  }  
});

ログイン後にコピー

明らかに、ここには MyCtrl と MyCtrl2 という 2 つのコントローラーがあります。この時点で、命令はどのコントローラーを呼び出すかをどのように認識するのでしょうか? 、この属性を使用してさまざまなコントローラーの呼び出しを判断し、さまざまなコントローラーで命令を呼び出すことができます。

概要: 命令が異なるコントローラーと対話できるようにするためです。設定項目はコマンドに対して定義されます。これがコマンドとコントローラー間のデータ対話の原理です。

以上がangularjs でコントローラーと命令の間の対話を実装する方法のサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。