2016-07-19 74 views
0

我有一個主控制器和嵌套的控制器。在主控制器中,我通過對服務的異步查詢來定義對象,並嘗試在嵌套控制器中使用該對象。但是在嵌套控制器中的對象是空的,導致它在主控制器中更新之前觸發。需要幫助瞭解角度js中的異步呼叫

據我所知,異步查詢應在數據獲取後更新範圍?

.controller('MainController', ['$scope', function($scope) { 

    $scope.uData = {}; 
    $scope.uDataCurrent = {}; 

    $scope.usersData = usersFactory.getUsersData().query(
     function(response) { 
      $scope.uData = response; 
      $scope.uDataCurrent = $filter('filter')($scope.uData, {'user':$scope.myuser}); 
      $scope.uDataCurrent = $scope.uDataCurrent[0]; 
     }, 
     function(response) { 
      $scope.message = "Error: "+response.status + " " + response.statusText; 
    }); 
})] 

.controller('NestedController', ['$scope', function($scope) { 
    console.log($scope.uDataCurrent); // returns empty object 
}]) 

服務:

.service('usersFactory', ['$resource', 'baseURL', function($resource,baseURL) { 

     this.getUsersData = function(){ 
      return $resource(baseURL+"/index.php?app=users&format=raw&resource=user",null, {'update':{method:'PUT' }}); 
     }; 

    }]) 
+0

你可以發佈你的工廠代碼嗎? – hsiung

+1

嵌套控制器不會「啓動」。它的初始化代碼在dom中的某個元素被實例化並且分配了一個控制器時運行。查詢回調將在稍後設置「uDataCurrent」。如果您使用綁定,則在收到新數據時,ui將更新爲新數據。 –

+0

@hsiung檢查初始代碼 – MikeDiam

回答

0

你可以使用$scope.$watch

angular.module("App", []) 
 
.controller("OuterCtrl", ["$scope", "$timeout", function($scope, $timeout) { 
 
    $scope.users = null; 
 
    
 
    $timeout(function() { 
 
    $scope.users = ["John", "Jack"]; 
 
    }, 500); 
 
}]).controller("InnerCtrl", ["$scope", function($scope) { 
 
    
 
    $scope.changeCount = 0; 
 
    
 
    // TODO: Bad practice to rely on outer scopes here as its not enforced 
 
    // to have an OuterCtrl scope as parent scope. In this example every 
 
    // occurrences of InnerCtrl is embedded in an OuterCtrl in the html 
 
    $scope.$watch("users", function(newValue, oldValue) { 
 
    // This code runs when the users array is changed 
 
    $scope.changeCount++; 
 
    }); 
 
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script> 
 

 
<div ng-app="App"> 
 
    <div ng-controller="OuterCtrl"> 
 
    <div ng-controller="InnerCtrl"> 
 
     <div>Change count: {{changeCount}}</div> 
 
     <div>Users</div> 
 
     <div ng-hide="users"> Loading...</div> 
 
     <ul> 
 
     <li ng-repeat="name in users">{{name}}</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>