angularjs – Angular ui.router重新加载父模板提供者

前端之家收集整理的这篇文章主要介绍了angularjs – Angular ui.router重新加载父模板提供者前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个抽象的基本模板,可以根据用户类型加载导航.这部分适用于初始加载.问题是我无法在用户登录或注销后重新加载父模板.我已尝试使用解决方here重新加载父模板,但导航模板不受影响.有没有办法重新加载templateProvider,或更好的方法吗?理想情况下,我不必将导航提供程序添加到每个子路由.

路线:

$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 issue尝试的控制器功能

scope.login_submit = function(e){
    e.preventDefault();
    User.login(scope.login,function(res){
         $state.transitionTo(
             'base.dashboard',null,{reload: true,inherit: true,notify: true }
         );
    });
};
我创建了 working example here.它来自 Q & A

这将是调整后的状态def:

.state('base',{ 
    abstract: true,views: {
        '': {
            template: '<ui-view></ui-view>',/*
        nav: {
            templateProvider: function ($templateFactory,$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’的新功能,根据网址从服务器获取html模板.

这些是控制器和服务

.controller('loginController',['$scope','User',function ($scope,User) {
  $scope.User = User;
}])
.factory('User',function(){   return { exists: false,}; })

这是子’base.index’状态模板的内容

<input type="checkBox" ng-model="User.exists" />
<button ng-click="$state.go('base.index',{reload: true})" >reload</button>

检查所有在action here

原文链接:https://www.f2er.com/angularjs/143532.html

猜你在找的Angularjs相关文章