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

发布时间：2020-12-17 07:54:59 所属栏目：安全来源：网络整理

导读：我有一个抽象的基本模板,可以根据用户类型加载导航.这部分适用于初始加载.问题是我无法在用户登录或注销后重新加载父模板.我已尝试使用解决方案 here重新加载父模板,但导航模板不受影响.有没有办法重新加载templateProvider,或更好的方法吗？理想情况下,我不

我有一个抽象的基本模板,可以根据用户类型加载导航.这部分适用于初始加载.问题是我无法在用户登录或注销后重新加载父模板.我已尝试使用解决方案 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!