Angular.js inicjowanie sterownika opóźniającego

Question

Chciałbym opóźnić inicjalizację kontrolera do momentu, aż niezbędne dane nie dotrą z serwera.

Znalazłem rozwiązanie dla Kątowymi 1.0.1: Delaying AngularJS route change until model loaded to prevent flicker, ale nie mógł on pracować z Kątowymi 1.1.0

Szablon

<script type="text/ng-template" id="/editor-tpl.html"> 
Editor Template {{datasets}} 
</script> 
    <div ng-view> 
</div> 

JavaScript

function MyCtrl($scope) {  
    $scope.datasets = "initial value"; 
} 

MyCtrl.resolve = { 
    datasets : function($q, $http, $location) { 
     var deferred = $q.defer(); 

     //use setTimeout instead of $http.get to simulate waiting for reply from server 
     setTimeout(function(){ 
      console.log("whatever"); 
      deferred.resolve("updated value"); 
     }, 2000); 

     return deferred.promise; 
    } 
}; 

var myApp = angular.module('myApp', [], function($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/editor-tpl.html', 
     controller: MyCtrl, 
     resolve: MyCtrl.resolve 
    }); 
});​ 

http://jsfiddle.net/dTJ9N/1/

Answer 1

Od $ http zwraca obietnicę, że to hit wydajność tworzenia własnych odroczone tylko do powrotu obietnicę, gdy dane http przybywa. Powinieneś być w stanie to zrobić:

MyCtrl.resolve = { 
    datasets: function ($http) { 
     return $http({method: 'GET', url: '/someUrl'}); 
    } 
}; 

Jeśli trzeba wykonać pewne przetwarzanie rezultaty daje stosowanie .then, a obietnica jest przykuty w za darmo:

MyCtrl.resolve = { 
    datasets: function ($http) { 
     return $http({method: 'GET', url: '/someUrl'}) 
       .then (function (data) { 
        return frob (data); 
       }); 
    } 
}; 

Answer 2

Można spojrzeć na niemal identycznym pytaniem here który korzysta z zasobów, ale to działa w ten sam sposób z $ http. Myślę, że to powinno działać

function MyCtrl($scope, datasets) {  
    $scope.datasets = datasets; 
} 

MyCtrl.resolve = { 
    datasets: function($http, $q) { 
     var deferred = $q.defer(); 

     $http({method: 'GET', url: '/someUrl'}) 
      .success(function(data) { 
       deferred.resolve(data) 
     } 

     return deferred.promise; 
    } 
}; 

var myApp = angular.module('myApp', [], function($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/editor-tpl.html', 
     controller: MyCtrl, 
     resolve: MyCtrl.resolve 
    }); 
});​ 

Answer 3

Zawsze możesz po prostu umieścić "ng-show" na najbardziej zewnętrznym elemencie DOM i ustaw go jako równy danym, na które chcesz poczekać.

Na przykład podany na stronie Angular JS domu można zobaczyć, jak łatwo jest: http://plnkr.co/CQu8QB94Ra687IK6KgHn Wszystko, co mieliśmy do zrobienia było ten sposób formularz nie będą wyświetlane, dopóki ta wartość została ustalona.

O wiele bardziej intuicyjny i mniej pracujący w ten sposób.