執行主控制器後執行控制器

Question

我有一個索引頁index.html及其控制器indexController。我在indexController的factory中設置了一些值（$ scope.ipAddress），其中ng-view中的其他控制器使用該值。

加載頁面時，應該首先執行indexController，然後在factory中設置一個值，然後該值由ng-view內的其他頁面控制器使用。

但我認爲其他控制器在indexController之前首先執行，我得到我設置的值未定義。

這是indexController與factory：

 angular.module('tollApp') 
.controller('indexController', function($scope,$http,$window,userDetailsFactory){ 
    $scope.usernameFromServer={}; 
    $scope.getUserDetails = function(){ 
     $http({ 
      method:'GET', 
      url:'http://192.168.1.80:4000/getUserDetails' 
      // url:'http://websitename.com/getUserDetails' 
     }) 
     .then(function(response){ 

      // console.log(JSON.stringify(response)); 
      userDetailsFactory.setUserDetailsInFactory(response.data); 
     $scope.usernameFromFactory = userDetailsFactory.getUserDetailsFromFactory().usernameFromSession; 
     $scope.theIP = userDetailsFactory.getUserDetailsFromFactory().ipAddress; 
      // $scope.usernameFromServer = userDetailsFactory.getUserDetailsFromFactory().username; 
      // console.log(JSON.stringify($scope.usernameFromFactory)+"usernameFromFactory"); 
     }) 
    } 
    $scope.logout = function(request,response){ 
     $http({ 
      method:'GET', 
      url:'/logout' 
     }) 
     .then(function(response){ 
      console.log(JSON.stringify(response)); 
      if(response.data=="logout"){ 
       // $window.location.href="http://websitename.comlogin"; 
       $window.location.href="http://192.168.1.80:4000/login"; 

      } 
     }) 
    } 
    console.log("indexController"); 
}).factory('userDetailsFactory',function(){ 
    var user = {}; 
    return { 
     setUserDetailsInFactory : function(val){ 
      user.useridFromSession = val[0].UserID; 
      user.usernameFromSession = val[0].UserName; 
      user.userroleFromSession = val[0].UserRole; 
      user.clientidFromSession = val[0].ClientID; 
      user.ipAddress = "http://192.168.1.80:4000/"; 
      // user.ipAddress = "http://websitename.com/"; 
      // console.log("in set "+user.clientidFromSession); 
     }, 
     getUserDetailsFromFactory : function(){ 
      return user; 
     } 
    }; 
}) 

，我使用的值從工廠的其它控制器：

$scope.ipForHttp = userDetailsFactory.getUserDetailsFromFactory().ipAddress; 
console.log($scope.ipForHttp); //undefined 
$scope.loading = false; 
$scope.ClientID = userDetailsFactory.getUserDetailsFromFactory().clientidFromSession; 
// $scope.dev={}; 

$scope.getDevice =function(){ 
    console.log($scope.ipForHttp); //undefined 
    $scope.loading = true; 

     $http({ 
     method : "GET", 
     url : $scope.ipForHttp+"getDeviceDetailsReport" 
     }).then(function mySucces(response) { 

Answer 1

看看你$scope.getUserDetails - 你使用$http（docs ）服務，以向後端發出非同步的AJAX呼叫。

您在返回對象的.then()方法中提供的回調函數可能在將來某個時間執行，甚至可能不執行 - 取決於調用是成功還是失敗。你不能期望它同步行爲，因爲它永遠不會，即使後端立即響應。

這就是爲什麼你不能期望在你的其他控制器中有所需的數據，並且需要相應地調整你的代碼的原因。

// tells angular to execute watcher function on every $digest 
$scope.$watch(function() { 
    // watches the returned value of the service's method 
    return userDetailsFactory.getUserDetailsFromFactory(); 
}, function (newVal) { 
    // filtering out empty object 
    if (!Object.keys(newVal).length) { 
     return; 
    } 

    // the following code will be run when 
    // userDetailsFactory.getUserDetailsFromFactory 
    // returns some value 
    // in our particular case - after getting 
    // data from backend and setting it in 
    // userDetailsFactory.setUserDetailsFromFactory 

    $scope.loading = false; 
    $scope.ipForHttp = newVal.ipAddress; 
    $scope.ClientID = newVal.clientidFromSession; 

    $scope.getDevice(); 
}, 
// tells angular to watch properties of the object too 
true); 

可選，如果需要執行該代碼，只有當用戶的細節設置一次，這樣做

var unbindUserDetailsWatcher = $scope.$watch(function() { 
    return userDetailsFactory.getUserDetailsFromFactory(); 
}, function (newVal) { 
    if (!Object.keys(newVal).length) { 
     return; 
    } 

    unbindUserDetailsWatcher(); 
    unbindUserDetailsWatcher = null; 

    ... 
});