Maison >interface Web >js tutoriel >Exemple de code expliquant comment implémenter l'interaction entre les contrôleurs et les instructions dans AngularJS

Exemple de code expliquant comment implémenter l'interaction entre les contrôleurs et les instructions dans AngularJS

黄舟original: 2017-06-01 09:34:421058parcourir

Cet article présente principalement l'explication détaillée de la façon d'implémenter l'interaction entre le contrôleur et les instructions dans angular js Il a une certaine valeur de référence. êtes intéressés Amis, vous pouvez vous référer à

Si nous avons la structure DOM suivante :

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

En même temps, notre contrôleur a la signature suivante :

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

En même temps, la signature de la commande est la suivante :

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

À ce moment, notre instruction peut terminer l'appel au contrôleur via scope.loadData ou scope.$apply. Mais que se passe-t-il si nous avons deux contrôleurs ? Et que les méthodes dans $scope sont différentes dans les deux contrôleurs ?

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"); 
  } 
}]);

Comment appeler la méthode dans nos instructions à ce moment-là, selon la méthode ci-dessus. Ensuite, nous allons faire face à un problème : MyCtrl2 n'a pas notre loadData, mais seulement loadData2 ! Pour le moment, nous devons utiliser les instructions suivantes pour personnaliser l'attribut

Nous avons défini deux contrôles de contrôleur Les contrôleurs. sont respectivement MyCtrl et MyCtrl2. Les deux contrôleurs utilisent nos propres instructions définies pour charger :

<!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>

Nous avons personnalisé le code du contrôleur comme suit :

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

Très évidemment, il y a deux contrôleurs ici. , à savoir MyCtrl et MyCtrl2. Comment notre instruction sait-elle quel contrôleur appeler ? À ce stade, nous devons spécifier différents attributs pour nos instructions et utiliser cet attribut pour juger différents appels de contrôleur, afin que nous puissions appeler les instructions de différentes manières. contrôleurs !

Résumé : La raison pour laquelle les instructions sont définies est pour la réutilisation. Afin de permettre aux instructions d'interagir avec différents contrôleurs, différentes configurations seront définies pour l'élément d'instructions, c'est le principe. d'interaction de données entre les instructions et les contrôleurs !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des éléments de configuration de session express dans node.jsArticle suivant：Explication détaillée des éléments de configuration de session express dans node.js

Articles Liés

Voir plus