Angular ui.router 重新加载父模板提供者 [英] Angular ui.router reload parent templateProvider
问题描述
我有一个抽象的基础模板,它根据用户类型加载导航.这部分适用于初始加载.问题是我无法在用户登录或退出后重新加载父模板提供程序.我已经尝试了解决方案 here 重新加载父模板,但导航模板不受影响.有没有办法重新加载 templateProvider,或者有更好的方法来做到这一点?理想情况下,我不必将导航提供程序添加到每个子路由中.
I have an abstract base template that loads the navigation based on the user type. This part works on initial loading. The problem is I can't get the parent templateProvider to reload when the user has logged in or out afterwards. I have tried the solutions here to reload the parent template, but the nav templates aren't affected. Is there a way to reload the templateProvider, or a better way of doing this? Ideally I won't have to add the nav provider to every child route.
路线:
$stateProvider
.state('base', {
abstract: true,
views: {
content: {
template: '<ui-view></ui-view>',
},
nav: {
templateProvider: function ($templateFactory, User, $stateParams){
if(User.exists()){
var url = '/static/html/navs/' + User.get.type + '.html';
return $templateFactory.fromUrl(url);
}
else{
return false;
}
}
}
}
})
.state('base.index', {
url: '/',
controller: 'loginController',
templateUrl: 'static/html/landing/login.html'
})
从github问题尝试的控制器功能:
scope.login_submit = function(e){
e.preventDefault();
User.login(scope.login, function(res){
$state.transitionTo(
'base.dashboard', null,
{reload: true, inherit: true, notify: true }
);
});
};
推荐答案
I created working example here. It is coming from this Q & A
这将是调整后的状态定义:
This would be the adjusted state def:
.state('base', {
abstract: true,
views: {
'': {
template: '<ui-view></ui-view>',
},
/*
nav: {
templateProvider: function ($templateFactory, User, $stateParams){
if(User.exists()){
var url = '/static/html/navs/' + User.get.type + '.html';
return $templateFactory.fromUrl(url);
}
else{
return false;
}
}
},*/
nav: {
templateProvider: ['User', '$templateRequest', function(User, templateRequest){
var tplName = 'templates/templateNotExists.html';
if(User.exists) {
tplName = 'templates/templateExists.html';
}
return templateRequest(tplName);
}],
},
}
})
正如我们所见,我们使用了新功能,称为'$templateRequest'
,根据url从服务器获取html模板.
As we can see, we use new feature called '$templateRequest'
, to get html template from server, based on the url.
这些是控制器和服务
.controller('loginController', ['$scope', 'User', function ($scope, User) {
$scope.User = User;
}])
.factory('User', function(){ return { exists: false, }; })
这是子'base.index'状态的模板内容:
And this is the content of the template of the child 'base.index' state:
<input type="checkbox" ng-model="User.exists" />
<button ng-click="$state.go('base.index', null, {reload: true})" >reload</button>
在此处操作
这篇关于Angular ui.router 重新加载父模板提供者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!