执行主控制器后执行控制器

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; 

    ... 
});