Bindung des Wertes zwischen Service und Controller/Direktive

Viele AngularJs-Entwickler kennen die Dienste, Controller und Direktiven von Angularjs. Wie Sie wissen, wird der Dienst von angularjs verwendet, um globale Aktionen oder Variablen zu haben. In allgemeinen Services, die als globale Aktionen verwendet werden, weil angularjs bereits eine Value-Funktion hat.

Lassen Sie uns nun ein wenig über die Konfiguration und Architektur von Diensten und Controllern sprechen. Stellen Sie sich vor, Sie haben einen Service, der eine Person repräsentiert. Es hat alle Getter- und Setter-Methoden. Wir haben einen weiteren Service als Datenmanager. Es bezieht alle 1 Minute Daten von überall her. Wir haben einige Kontrolleure und einige Direktiven , und wir wollen bestimmte Daten in ihnen binden. Nur ein einfaches Beispiel. Wir haben 3 Controller und 2 Direktiven. Einige von ihnen müssen Daten binden und unsere Dienste nutzen.Denken Sie daran, dass wir einen Dienst mit dem NamenPerson und einen Dienst mit dem Namen DataManager haben.

Was können wir tun, damit wir unser Problem lösen?

angular.module('myModule')
    .service('Person', function() {
         var name = 'Default';
         var listCount = 0;

         this.getName = function() {
             return name;
         };
         this.setName = function(Name) {
             name = Name;
         };

         this.getListCount = function() {
             return listCount;
         };
         this.setListCount = function(ListCount) {
             listCount = ListCount;
         };
    })

angular.module('myModule')
    .service('DataManager', function($interval, $http, Person) {
       $interval(function(){
          $http.get([url])
              .then(function(data){
                  Person.setName(data.name);
                  Person.setListCount(data.count);
              });   // getting the data every 1 minute
          }, 60000);
    })

Die folgenden Dienste stellen Daten innerhalb eines Controllers oder einer Direktive zur Verfügung und zeigen nun, wie wir diese Daten binden können, z. B. innerhalb des Controllers.

angular.module('myModule')
    .controller("MyController",function($scope, Person){
       $scope.user = null;
        // here we need live data for person
    })

Wie Sie sehen, wenn wir die Daten drucken wollen, werden wir Probleme haben, weil wir den Zuhörer nicht auf einen Wert einstellen können, um die Daten zu binden (wir nehmen die Daten aus dem Service). Aber wie kann man das machen? Wie kann man Live-Daten in unserem Controller haben?

Hier sind die Lösungen für dieses Problem.

Lösung 1

Diese Lösung ist gut, wenn wir die Live-Daten nur in 1 Controller/Direktive verwenden. Die Lösung ist: Wir können Intervalle innerhalb unserer Controller/Direktive definieren und wir werden eine Variable in unserem Bereich haben, die die Daten vom Server enthält. Wir können diesen Wert in unserer Ansicht drucken und AngularJs wird das automatisch tun. Es ist nur eine sehr einfache Sache. Dann benötigen wir den DataManager-Dienst nicht mehr. Hier ist ein Beispiel:

angular.module('myModule')
    .controller("MyController",function($scope, Person, $interval){
       $scope.user = null;
        $interval(function(){
          $http.get([url])
              .then(function(data){
                  $scope.user.name = data.name;
                  $scope.user.count = data.count;
              });   // getting the data every 1 minute
          }, 60000);
    })

Vielleicht denken Sie, warum brauchen wir den Personendienst?. Im Allgemeinen haben Sie Recht, aber wir können ihn in unserem Controller verwenden, um die Daten des Personendienstes (für andere Komponenten) zu aktualisieren.

Lösung 2

Die zweite Lösung ist gut, wenn wir viele Komponenten haben und den Dienst (mit Live-Daten) in vielen Komponenten (Controller/Direktive) nutzen müssen. Die Lösung ist: AngularJs Events.

Wir können die Zuhörer auf jedes Ereignis einstellen und wenn der Dienst eine neue Live-Daten vom Server erhält, sendet er ein Signal, um zu sagen, dass er neue Daten hat, die wir überall verwenden können.

angular.module('myModule')
    .service('DataManager', function($interval, $http, Person, $rootScope) {
       $interval(function(){
          $http.get([url])
             .then(function(data){
                 Person.setName(data.name);
                 Person.setListCount(data.count);
                  
                 // here we have to send signal that we have a new live data from the server
                 // we use Root Scope, because we don't know what scope architecture do we have
                 $rootScope.$broadcast("newPersonData");
             });   // erhalten von Daten alle 1 Minute
          }, 60000);
    })

Wir können dieses Ereignis nutzen, wo immer wir wollen. Wir können den Zuhörer auf dieses Ereignis einstellen und wenn der Dienst neue Daten hat, können wir die Methoden der Person aufrufen, um es zu aktualisieren. Sie können die Daten sogar an 'eventName' senden. Wir haben eine andere großartige Lösung. Wenn Sie daran interessiert sind, schreiben Sie uns in Google+, Facebook und Twitter.