javascript - $stateProvider 根据用户更改模板

Question

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

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

现在，我不想定义两次状态(1 次用于 Admin，1 次用于 client)，我希望创建一个无论如何都能为正确模板提供服务的逻辑

为此，我阅读了 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 设置为正确的模板，但是它永远不会注入(inject)到 html 中，而是我得到:

   <div>   <!-- ngInclude: tpl/client/client.html -->    </div>
   

2. 这个想法很好，但是为每个抽象状态编写上述代码似乎很乏味且非常多余。

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

所以现在我觉得我别无选择。

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

Answer 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 Router 状态没有帮助，因为它会影响 $state 实例，而不是 $stateProvider 提供程序。 $stateProvider.state 方法 can be patched directly修改状态对象，尽管在这种情况下很难被认为是合理的解决方案。