我想推迟控制器的初始化,直到从服务器收到必要的数据。
我为Angular 1.0.1找到了这个解决方案:将AngularJS路由更改延迟到加载模型以防止闪烁,但无法使其与Angular 1.1.0 一起工作
模板
<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/
由于$http返回promise,因此创建自己的延迟只是为了在http数据到达时返回promise会对性能造成影响。你应该能够做到:
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);
});
}
};
您可以始终将"ng-show"放在最外层的DOM元素上,并将其设置为您想要等待的数据。
对于Angular JS主页上列出的示例,您可以看到它是多么容易:http://plnkr.co/CQu8QB94Ra687IK6KgHn所要做的就是这样,在设置该值之前,表单不会显示。
这种方式更直观,工作量更少。
您可以在这里查看一个使用资源的几乎相同的问题,但它与$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
});
});