Eine kurze Diskussion über die Beziehung zwischen Controllern, Diensten und Anweisungen in Angular

Dieser Artikel stellt Ihnen die Beziehung zwischen eckigenControllern, Diensten und Anweisungen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

【Verwandte Empfehlung: „angular Tutorial“】

Insgesamt ist die Beziehung zwischen diesen drei Komponenten wie folgt:

• Der Dienst ist für das Abrufen und Speichern von Daten vom Remote-Server verantwortlich.
• Auf Diensten basierende Controller stellen Daten und Funktionen für die Bereichshierarchie von Angular bereit.
• Auf Diensten und Controllern basierende Anweisungen interagieren direkt mit DOM-Elementen (Document Object Model).

Da der Controller nicht beim Abhängigkeitsinjektor registriert ist, können der Controller und der Dienst den Controller nicht als Abhängigkeit auflisten.

<div ng-controller="MyController"></div>

var m = angular.module('myModule');
 
m.factory('myService', function() {
    return { answer: 42 };
});
 
m.controller('MyController', function(myService) {
    //使用myService
});
 
m.controller('MyController2', function(MyController) {
    //错误：使用控制器注册
});
 
m.factory('myService2', function(MyController) {
    //错误：使用控制器注册
});

Jeder NG-Controller wird einmal instanziiert, und der Dienst wird nur einmal instanziiert, das heißt, der Dienst ist ein Singleton.

Controller können lokale Objekte als Abhängigkeiten auflisten, z. B. $scope, aber Dienste können lokale Objekte nicht als Abhängigkeiten auflisten.

m.factory('myService', function($scope) {
    //错误：$scope未使用依赖注入器进行注册
});

Aus diesem Grund ist es in Angular der Controller, der JavaScript-Daten und -Funktionen für HTML verfügbar macht, und nicht der Dienst: Der Controller hat Zugriff auf $scope.

Anweisungen können einen zugeordneten Controller haben und Dienste können als Abhängigkeiten aufgelistet werden. Aber Controller und Dienste können Anweisungen nicht als Abhängigkeiten auflisten.

angular.module('stockDogApp')
  .directive('stockTable', function() {
  	return {
  		template: 'Views/templates/stock-table.html',
  		restrict: 'E',
  		scope: {
  			watchlist: '='
  		},
  		controller: function ($scope) {
  			//...
  		}
  	}
  });

Die Direktive kann auch ein require-Attribut haben, das verwendet wird, um sicherzustellen, dass der Geltungsbereich der Direktive immer ein Nachkomme des Geltungsbereichs einer anderen Direktive sein muss.

angular.module('stockDogApp')
  .directive('stockRow', function($timeout, QuoteService) {
  	return {
  		restrict: 'A',
  		require: '^stockTable' //stockTable指令，^表示在父作用域中寻找
  		scope: {
  			stock: '=',
  			isLast: '='
  		},
  		link: function ($scope, $element, $attrs, stockTableCtrl) {
  			//..
  		}	
  	}
  });

Die Direktivenoption require erfordert, dass der Gültigkeitsbereich der stockRow-Direktive ein Nachkomme des Gültigkeitsbereichs der stockTable-Direktive sein muss und auf den Controller der instanziierten stockTable-Direktive zugreifen kann, der der vierte Parameter der Link-Funktion ist. Wenn die beiden Direktiven zusammen verwendet werden müssen, ist die Option „Require“-Direktive das richtige Werkzeug für diese Aufgabe.

Hinweis: Bitte beachten Sie „Erweiterte Programmierung mit AngularJS“ nur zur Erinnerung.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Beziehung zwischen Controllern, Diensten und Anweisungen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!