$ http Timing Probleme, AngularJS

Question

Haben zwei Probleme. Ich versuche, einen Wert von einer $ HTTP-Antwort zu erhalten und eine Variable damit zu füllen, die dann einige DOM-Objekte aktualisieren sollte. Problem ist, dass es scheint, ein Timing-Problem zu haben, wo die Funktion, die den $ http-Service aufgerufen hat, vervollständigt wird, und dann wird die Variable aktualisiert, aber scheint nicht überall zu aktualisieren, wo es sollte. Ich habe auch versucht, die Variable zu überwachen, und sie scheint nur dann ausgelöst zu werden, wenn die Seite geladen wird. Ich habe den ganzen Tag alles gelesen und finde keine Antwort, die funktioniert.

app.controller('MainCtrl', ['$scope', '$http', 'waciServ', function($scope,  $http, waciServ) { 
"use strict"; 
$scope.currentSource = waciServ.activeSource; 

$scope.$watch('waciServ.activeSource', function(newValue, oldValue) { 
     $scope.currentSource = newValue; 
     console.log('Watcher! ' + newValue); 
}/*, true*/); 

$scope.getActiveSource = function() { 
    $scope.currentSource = waciServ.getStringByName("active_device"); 
}; 
}]); 

app.service('waciServ', function($http) { 
    var self = this; 
    this.waciIP = location.host; 
    this.activeSource = ''; 

    this.getStringByName = function (name) { 
    $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableByName&param1=" + name + "&encoding=2") 
     .then (function (response) { 
      var was_error = self.read(response.data); 

      if (was_error == '1') { //active_device is not set 
       self.assignVariable(name, "none"); 
       self.activeSource = "none"; 
       return self.activeSource; 

      } else { 
       var varId = parseInt(self.read(response.data)); 
       $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableValue&param1=" + varId + "&encoding=2") 
        .then (function (response) { 

         self.activeSource = self.read(response.data); 

         return self.activeSource;  
       }); 
      } 
    }, function (error) { 
     console.log("error: " + error.data); 
    }); 
    }; 
}); 

i eine console.log rechts vor der Rückkehr Feuer platzieren kann und sehen, dass ich habe, was ich will, aber eine andere console.log in der Funktion in der Steuerung zeigt ‚undefiniert‘ gesetzt.

Was gibt? Vielen Dank im Voraus.

Answer 1

Sie müssen nicht darüber nachdenken, Watcher zu verwenden.

Grundsätzlich ist das Problem, dass Sie keine Versprechen von der Service-Methode zurückgeben. Sie sollten Versprechen der $http Methode Anrufe von Ihrem Service-Methode .Thereafter Verwendung .then über Methode Aufruf an Kette Versprechen & setzen success & error Funktion in es. (this answer ist wenig ähnlich mit dem, was Sie fragen, aber nicht genau)

Dienst

self.getStringByName = function(name) { 
    //returned promise from here 
    return $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableByName&param1=" + name + "&encoding=2") 
    .then(function(response) { 
    var was_error = self.read(response.data); 

    if (was_error == '1') { //active_device is not set 
     self.assignVariable(name, "none"); 
     self.activeSource = "none"; 
     return self.activeSource; //returned data here to chain promise 
    } else { 
     var varId = parseInt(self.read(response.data)); 
     //returned promise from here 
     return $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableValue&param1=" + varId + "&encoding=2") 
     .then(function(response) { 
     self.activeSource = self.read(response.data); 
     //returned data from here 
     return self.activeSource; 
     }); 
    } 
    }, function(error) { 
    console.log("error: " + error.data); 
    }); 
}; 

-Controller

app.controller('MainCtrl', ['$scope', '$http', 'waciServ', function($scope,  $http, waciServ) { 
"use strict"; 
    $scope.currentSource = waciServ.activeSource; 

    $scope.getActiveSource = function() { 
     waciServ.getStringByName("active_device").then(function(source){ 
     $scope.currentSource = source; 
     }); 
    }; 
}]);