Angular.js 컨트롤러 초기화 지연

Question

필요한 데이터가 서버에서 도착할 때까지 컨트롤러의 초기화를 지연하고 싶습니다.

나는 각도 1.0.1이 솔루션을 발견 : Delaying AngularJS route change until model loaded to prevent flicker을하지만, 각도 1.1.0

템플릿과

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

자바 스크립트 작동되지 수

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 
    }); 
});​ 

Answer 1

일을해야한다고 생각, 그것은 자신이 HTTP 데이터가 도착하면 바로 약속을 반환하는 연기 만들 수있는 성능 저하입니다. 당신은 할 수 있어야한다 : 당신은 결과의 일부 처리를 할 필요가 있다면, 그 때는 사용

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

하고 약속은 무료로에 연결됩니다 :

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

Answer 2

리소스를 사용하는 거의 동일한 질문 here을 살펴볼 수 있지만 $ http와 동일한 방식으로 작동합니다. 나는 $ HTTP는 약속을 반환하기 때문에이

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

당신은 언제나 둘 수 있었다 바깥 쪽의 DOM 요소에 "ng-show"를 지정하고 기다리고 싶은 데이터와 동일하게 설정하십시오. 당신이 얼마나 쉽게 볼 수있는 각도 JS 홈 페이지에 나와있는 예를 들어

: http://plnkr.co/CQu8QB94Ra687IK6KgHn 수행해야했다 그 모든 이었다 그 값이 설정 될 때까지 양식이 표시되지 않습니다 그런 식으로.

이 방법으로 훨씬 직관력이 적어집니다.