Brauchen Sie Hilfe, um asynchrone Aufrufe in angular js zu verstehen

Question

Ich habe einen Hauptcontroller und darin eingebettete Controller. Im Hauptcontroller habe ich das Objekt per asynchroner Abfrage zum Dienst definiert und versuche das Objekt im verschachtelten Controller zu verwenden. Aber in dem Objekt im verschachtelten Controller ist leer, weil es ausgelöst wird, bevor es im Hauptcontroller aktualisiert wird.

Wie ich verstehe, sollte asynchrone Abfrage den Bereich aktualisiert, nachdem Daten erhalten?

.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:

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

    }]) 

Answer 1

könnten Sie $scope.$watch verwenden.

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>