延迟AngularJS路由更改,直到模型加载,以防止闪烁
我想知道是否有一种方式(类似于Gmail)AngularJS延迟显示一个新的路由,直到每个模型及其数据已使用其各自的服务提取之后。
例如,如果有一个ProjectsController列出了所有的项目,并且project_index.html是显示这些项目的模板,则在显示新页面之前,将会完全取出Project.query()。 在此之前,旧页面仍将继续显示(例如,如果我正在浏览另一个页面,然后决定查看此项目索引)。
$routeProvider
resolve属性允许延迟路由更改,直到加载数据。
首先定义一个具有像这样的resolve属性的路由。 angular.module('phonecat',['phonecatFilters','phonecatServices','phonecatDirectives']). config(['$routeProvider',function($routeProvider) { $routeProvider. when('/phones',{ templateUrl: 'partials/phone-list.html',controller: PhoneListCtrl,resolve: PhoneListCtrl.resolve}). when('/phones/:phoneId',{ templateUrl: 'partials/phone-detail.html',controller: PhoneDetailCtrl,resolve: PhoneDetailCtrl.resolve}). otherwise({redirectTo: '/phones'}); }]); 注意resolve属性是在route上定义的。 function PhoneListCtrl($scope,phones) { $scope.phones = phones; $scope.orderProp = 'age'; } PhoneListCtrl.resolve = { phones: function(Phone,$q) { // see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4 var deferred = $q.defer(); Phone.query(function(successData) { deferred.resolve(successData); },function(errorData) { deferred.reject(); // you could optionally pass error data here }); return deferred.promise; },delay: function($q,$defer) { var delay = $q.defer(); $defer(delay.resolve,1000); return delay.promise; } } 注意,控制器定义包含一个resolve对象,它声明了控制器构造函数应该可用的东西。这里电话被注入到控制器中,并在resolve属性中定义。 resolve.phones函数负责返回一个promise。所有的promise被收集,并且路由改变被延迟,直到所有promise被解决之后。 工作演示:http://mhevery.github.com/angular-phonecat/app/#/phones (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- webservice的 Unrecognized xbean element mapping: servic
- 基于Axis 1.4 部署WebService 笔记(二)
- MSF实现RID劫持和MSF实现PsExec执行命令
- 【Ionic+AngularJS 开发】之『个人日常管理』App(一)
- 为什么不在Scala中设置方法强制执行类似的类型?
- scala – Spark加载模型并继续训练
- angularjs----directive 指令
- forms – ng-show =“true”但仍然有class =“ng-hide”
- 单元测试 – Jasmine单元测试:$compile从ng-repeat中产生注
- scala – 在类构造函数中使用trait方法