AngularJS ui-router - 视图在重新加载时消失



最近我开始使用ui-router来管理我的页面状态。

我注意到,当我第一次运行服务器时,内容就在那里,但是如果我浏览页面或重新加载页面,内容就会消失。

我知道ui-router上有一个可能导致此问题的错误。我更新了ui-router但是错误仍然存在。

有没有人设法找到修复或解决它?

编辑----

我的调查使我相信它与ui路由器无关,更多的是应用程序完成承诺所需的时间。因为我会在 setTimeout 上收到违规警告,作为 jQuery 的一部分

所以我在最后一次编辑时部分正确,因此这个答案; jQuery与我的问题有关(通过使用承诺来检索数据),但它也与ui路由器的工作方式有关:

加载页面内容时,ui-router 将使用 GET 请求提供的数据管理第一次加载(以及随后的重新加载)。

由于这是一个承诺,因此不能保证(尤其是在您扩展数据库时)数据将及时出现以呈现页面。

若要避免发生,请使用 resolve 属性作为 ngRoute 的一部分。此属性允许在呈现 DOM 之前加载所有必要的数据。

如果您想阅读更多相关信息,请点击以下链接:

https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c

我的代码如下:

应用.js

'use strict';

angular
.module('knoweeApp', ['ui.router'])
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('home', {
url:'/',
templateUrl: 'views/user.html',
controller: 'UserCtrl as user',
resolve: {
user: function(userFinder) {
return userFinder.getUsers();
}
}
})
.state('teacher', {
url:'/teacher/:name',
templateUrl: 'views/teacher.html',
controller: 'TeacherCtrl as teacher'
});
$urlRouterProvider.otherwise('/');
}]); 

服务:用户查找器

'use strict';
/**
* @ngdoc service
* @name knoweeApp.userFinder
* @description
* # userFinder
* Service in the knoweeApp.
*/
angular.module('knoweeApp')
.service('userFinder', function () {
// AngularJS will instantiate a singleton by calling "new" on this function
this.getUsers = function (){
return $.get('users.json');
};
});

控制器:用户控制


'use strict';
angular.module('knoweeApp')
.controller('UserCtrl', function (userFinder,user) {
this.teachers = user;
this.increment = function (item) {
item.rating += 1;
};
this.decrement = function (item) {
item.rating -= 1;
};
});

希望这有帮助,如有疑问,请与我联系

最新更新