从装饰设置视图的名字 - 角UI路由器 [英] Setting view's name from decorator - Angular Ui Router

问题描述

我确定我的状态是这样的：

I'm defining my states in this way:

var parentStates = [
 {state : 'home', url: '/home', template: 'home.html'},
 {state : 'about', url: '/about', template: 'about.html'},
 {state : 'contact', url: '/contact', template: 'contact.html'},
 {state : 'home.data', url: '', template: 'data.html'},
 {state : 'about.data', url: '', template: 'data.html'},
 {state : 'contact.data', url: '', template: 'data.html'}
];

$urlRouterProvider.otherwise("/main/home");

$stateProvider
 .state("main", { abtract: true, url:"/main",
    views: {
        "viewA": {
            templateUrl:"main.html"
        }
    }
});
parentStates.forEach(function(value){
    $stateProvider
    .state("main." + value.state, {
        url: value.url,
        views: {
            "": {
                templateUrl: value.template
            }
        },
    })
});

我想写一个'装饰'根据'templateUrl 设置视图的名字（正如你看到的上面，视图的名称为空）

这是code的装饰：

$stateProvider.decorator('views', function (state, parent) {
 var result = {},
 views = parent(state);

 // Don't touch the 'main state'
 if (state.name === "main") {
  return views;
 }

 angular.forEach(views, function (config, name) {
    if(config.templateUrl=='data.html'){
        result[name] = 'viewC@main';
    }
    else{
        result[name] = 'viewB@main';
    }
 });
return result;
});

当然，这是行不通的。我有点失去了。

Of course, this doesn't work. I'm a little bit lost.

推荐答案

有一个工作plunker

您几乎没有。让我们简化了一下状态定义的（因为我们不需要嵌套视图对象，我们将在稍后创建它）的：

You are almost there. Let's simplify a bit the state definition (because we do not need nested views object, we will create it later):

parentStates.forEach(function(value) {
    $stateProvider
      .state("main." + value.state, {
        url: value.url,
        templateUrl: value.template,
      })
  });

和这将是装饰：

  $stateProvider.decorator('views', function(state, parent) {
    var result = {},
      views = parent(state);

    // some example when to not inject resolve
    if (state.name === "main") {
      return views;
    }

    angular.forEach(views, function(config, name) {

      // the super child template
      if(config.templateUrl === 'data.html'){
        result['viewC@main'] = config;
      }
      else{
        result['viewB@main'] = config;
      }
    });

    return result;
  });

检查一下这里

观察这些孩子的：

• 如何装修现状的决心功能UI的路由器？当前函数不调用


• AngularJS：如何设置一个状态在UI的路由器的全球母公司（使用模态作为通用零件）

• How to decorate current state resolve function in UI-Router? Current function isn't invoked
• AngularJS: How to set one state as a global parent in UI-Router (to use modal as common parts)

这篇关于从装饰设置视图的名字 - 角UI路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！