使用 AngularJS UI 路由器中的 templaterProvider 基于登录角色的动态模板

Question

我正在尝试根据登录用户的角色呈现不同的模板。我正在使用 templateProvider 在 UI-Router 中实现此目的，但它似乎不起作用。举个简单的例子说明我在这里要实现的目标：[http://plnkr.co/edit/J8Ebv4CQWHOjOpNoCkxl?p=preview]

// Code goes here
angular.module('test',['test.app','test.session','ui.router']);
angular.module('test.session',[])
.service('Session',['$http',function($http){
  this.current = function(){
    // this will be a custom server response later
    return $http.get('user.json');
  };
}]);
angular.module('test.app',['ui.router','test.session'])
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  $stateProvider.
    $state('home',{
      url: '/',
      controller: 'AppCtrl',
      templateProvider: ['Session','$stateParams','$templateFactory',function(Session,$stateParams,$templateFactory){
        return Session.current().then(function(user){
          // return template based on login role.
          console.log(user);
          if (user.isAdmin){
            return $templateFactory.fromUrl('admin.tpl.html',$stateParams);
          }else{
            return $templateFactory.fromUrl('user.tpl.html',$stateParams);
          }
        })
      }]
    });
    $urlRouterProvider.otherwise("/");
}])
.controller('AppCtrl',['$scope',function($scope){
  // Controller logic
}]);

我被困在这里不知道我错过了什么，任何帮助将不胜感激。

Answer 1

有working plunker。定义应该是这样的：

// instead of this
$stateProvider.
    $state('home',{
// we need this
$stateProvider. 
    state('home',{

而且，响应不是用户：

Session.current()
  // instead of this
  .then(function(user){
  // we need this
  .then(function(response){
       var user = response.data;

检查一下here

使用 AngularJS UI 路由器中的 templaterProvider 基于登录角色的动态模板

dynamic template based on login role using templaterProvider in AngularJS UI Router

angularjs

angular-ui-router