$ stateProvider根据用户更改模板

时间:2016-04-04 13:01:19

标签: javascript angularjs angular-ui-router

好的,这个问题很长,但我觉得我已经尝试了一切,所以我希望你能帮助我,如果可以的话:)。

基本上我的系统有两种用户类型:Admin& Client这些类型绑定到模板tpl/app.html& tpl/client/client.html

现在不是两次定义状态(Admin为1而client为1)我希望制作一个逻辑,无论是什么

都能提供正确的模板

为此,我阅读了Documentation for $stateProvider,发现我能够将templateUrl设置为函数:

  templateProvider: function ($sessionStorage) {
                        return template;
                    },

使用这种语法,我能够做到这样的事情:

templateProvider: function ($sessionStorage) {
    var templateLocation = $sessionStorage.user.type == 'Admin' ? 'tpl/app.html' : 'tpl/client/client.html';
   return '<div ng-include="'+templateLocation+'"> </div>' 
},

现在这个

有两个问题
  1. 首先由于某些原因,这不起作用。它确实将url设置为正确的模板,但它永远不会被注入到html而是我得到了这个:

    <div>   <!-- ngInclude: tpl/client/client.html -->    </div>
    
  2. 这个想法很好但是为每个抽象状态制作上面的代码似乎很乏味且非常冗余。

  3. 因为#2我决定创建一个装饰器。但是decorator也存在问题。它根本无法使用我的用户数据所在的服务$sessionStorage,这意味着我无法知道哪个用户尝试访问该内容。

    所以现在我觉得我没有选择。

    我希望你们中的一些人能够帮助我!

1 个答案:

答案 0 :(得分:1)

没有必要为每个抽象状态编写WET匿名函数。

function userTemplateProvider($sessionStorage, $templateRequest) {
    var templateLocation = $sessionStorage.user.type == 'Admin' ? 'tpl/app.html' : 'tpl/client/client.html';
   return $templateRequest(templateLocation); 
},

...
templateProvider: userTemplateProvider

Angular decorator对UI路由器状态没有帮助,因为它会影响$state实例,而不会影响$stateProvider提供商。 $stateProvider.state方法can be patched directly来修改状态对象,尽管在这种情况下很难被认为是合理的解决方案。