$ http 타이밍 문제, AngularJS

Question

두 가지 문제가 있습니다. $ http 응답에서 값을 가져 와서 몇 개의 DOM 개체를 업데이트해야하는 변수를 채우려고합니다. 문제는 $ http 서비스를 호출 한 함수가 완료되고 변수가 업데이트되지만 어디서나 업데이트되지 않는 타이밍 문제가있는 것 같습니다. 변수에 시계를 넣으려고했는데 페이지가 처음로드 될 때만 실행되는 것처럼 보입니다. 나는 하루 종일이 모든 것을 읽고 있었고 작동하지 않는 답을 찾는 것 같습니다.

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

내가 반환 화재 전에 CONSOLE.LOG 권리를 배치하고 내가 원하는 것을 가지고 있지만, 다른 CONSOLE.LOG 컨트롤러 쇼 '정의되지 않은'내 기능에 배치 것을 볼 수 있습니다.

무엇을 제공합니까? 미리 감사드립니다.

Answer 1

당신은 watcher를 사용하려고 생각할 필요가 없습니다.

기본적으로 문제는 서비스 방법에서 약속을 반환하지 않는다는 것입니다. 서비스 메서드에서 $http 메서드 호출의 약속을 반환해야합니다. & & 메서드 호출을 통해 .then을 사용하여 success & error 함수를 호출하십시오.

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

컨트롤러에게

서비스

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

을 (this answer는 요구가 아니라 정확히 무엇과 거의 유사하다)