Heim >Web-Frontend >js-Tutorial >Beispielcode für die Implementierung der Interaktion zwischen Controllern und Anweisungen in AngularJS

Beispielcode für die Implementierung der Interaktion zwischen Controllern und Anweisungen in AngularJS

黄舟Original: 2017-06-01 09:34:421058Durchsuche

In diesem Artikel wird hauptsächlich die detaillierte Erklärung zur Implementierung der Interaktion zwischen Controller und Anweisungen in Angular js vorgestellt Interessierte Freunde, Sie können sich auf

Wenn wir die folgende DOM-Struktur haben:

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

Gleichzeitig hat unser Controller die folgende Signatur:

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

Gleichzeitig command Die Signatur lautet wie folgt:

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

Zu diesem Zeitpunkt kann unsere Anweisung den Aufruf an den Controller über Scope.loadData oder Scope.$apply abschließen. Aber was ist, wenn wir zwei Controller haben? Und die Methoden in $scope sind in den beiden Controllern unterschiedlich?

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

Wie rufe ich die Methode in unserer Anleitung zu diesem Zeitpunkt gemäß der obigen Methode auf? Dann werden wir es tun stehen vor einem Problem: MyCtrl2 hat nicht unsere LoadData, sondern nur LoadData2! Zu diesem Zeitpunkt müssen wir die folgenden Anweisungen verwenden, um das -Attribut

anzupassen. Wir haben zwei Controller-Steuerelemente definiert sind MyStrg und MyStrg2. Beide Controller verwenden unsere eigenen definierten Anweisungen zum Laden:

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

Wir haben den Controller-Code wie folgt angepasst:

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

Ganz offensichtlich gibt es hier zwei Controller , nämlich MyStrg und MyStrg2. Woher wissen wir, welchen Controller wir aufrufen müssen? Controller!

Zusammenfassung: Der Grund, warum Anweisungen definiert werden, ist die Wiederverwendung. Damit die Anweisungen mit verschiedenen Controllern interagieren können, werden für die Anweisungen unterschiedliche Konfigurationen definiert der Dateninteraktion zwischen Anweisungen und Controllern!

Das obige ist der detaillierte Inhalt vonBeispielcode für die Implementierung der Interaktion zwischen Controllern und Anweisungen in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Express-Sitzungskonfigurationselemente in node.jsNächster Artikel：Detaillierte Erläuterung der Express-Sitzungskonfigurationselemente in node.js

In Verbindung stehende Artikel

Mehr sehen