Question

如果这个问题很明显，请道歉。

我在主模块文件中同时定义了几个状态，用于UI-Router。

我的代码是：

 samApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "nav": {template: "index.nav"},
        "header": { template: "index.viewA" },
        "page": { template: "index.viewB" }
      }
    })
    .state('articles', {
      url: "/route1",
      views: {
        "nav": {template: "index.nav"},
        "viewA": { template: "route1.viewA" },
        "viewB": { template: "route1.viewB" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "nav": {template: "index.nav"},
        "viewA": { template: "route2.viewA" },
        "viewB": { template: "route2.viewB" }
      }
    })
});

如您所见，我希望每条路线都使用相同的导航。是否有可能写出如下内容：

.state(['index', 'articles', 'route2'], {
      url: "",
      views: {
        "nav": {template: "index.nav"}
      }
    })

或者这是不可能的？谢谢。

Answer 1

要对视图定义进行分组，请使用抽象状态：

$stateProvider
    .state('parent', {
        // use quotes for avoiding compilation issues with this reserved word
        'abstract': true,
        url: '',
        views: {
            'nav': { template: 'index.nav' }
        }
    })
    .state('articles', {
        parent: 'parent',
        url: "/route1",
        views: {
            // use the viewName@stateName syntax (stateName is empty since we address root no name state
            "header@": { template: "index.viewA" },
            "page@": { template: "index.viewB" }
        }
    })
    /* ... quite the same for other child states */
;

请参阅ui router view names documentation和ui router abstract state documentation。＆＃39;

使用UI-Router在一行中定义Angular中的多个状态

1 个答案: