Angular ui.router 重新加载父 templateProvider

问题描述

我有一个基于用户类型加载导航的抽象基础模板.这部分适用于初始加载.问题是当用户之后登录或注销时，我无法让父 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 问题:

Controller function with attempts from 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 }
         );
    });
};

推荐答案

我在这里创建了 工作示例.它来自这个 Q &一个

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 重新加载父 templateProvider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！