使用 ui-router 在父视图中注入模板

Question

我有一个抽象状态声明为

$stateProvider.state('myapp', {
    abstract: true,
    templateUrl : 'index.html'
});

并且 'index.html' 模板中的所有 <ui-view> 将由子状态填充：

$stateProvider.state('myapp.home', {
    url : "/",
    views : {
        "main" : {
            controller : 'HomeCtrl',
            templateUrl : 'includes/home.html'
        }
    }
});

我不明白的是为什么来自主状态的模板没有注入父命名视图，但在使用 "main@" 作为视图名称时它可以工作。

如果我理解正确，"@" 以绝对根状态为目标，仅使用 "main" 以父状态为目标。

但是这里的抽象状态不是myapp.home的父级吗？

谢谢

Answer 1

您正在使用命名视图。使用 main@ 指定 child 视图将添加到名称为 "main" 的 ui-view。如果您的 parent 没有任何名称为 main 的 ui-view，则视图将不会插入 html.

对于parent child 关系，您不一定需要命名视图。只需将您的状态更新为以下，它就会起作用。此外，您还必须从 html 中删除 ui-view 中的名称。

$stateProvider.state('myapp.home', {
    url : "/",
   controller : 'HomeCtrl',
   templateUrl : 'includes/home.html'

});

Answer 2

我想说，我们的 超级根 状态 'myapp' 使用名为 [=15 的模板这一事实可能会造成严重的混淆=]。

我建议更改该命名，然后 this adjusted example 应该会起作用。 index.html，将仅用作起始页（参考 angular、UI-Router...）

<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>

  <head>
    <title>my app</title>
    <script src="angular.js"></script>
    <script src="angular-ui-router.js"></script>
    <script ...
  </head> 

  <body>
    // place for our root state        
    <div ui-view=""></div>

  </body> 

</html>

现在，我们可以通过 3 种方式定位此 ui-view。我们可以使用隐含的、显式的相对的或显式的绝对命名 build 为 viewName@stateName。这三个定义是一样的：

// I. no views : {} needed, we target parent unnamed
.state('myapp', {
    abstract: true,
    templateUrl: 'tpl.myapp.html'
})
// II. we target explicit parent unnamed view - relative notation
.state('myapp', {
    abstract: true,
    views : {
        '': {
            templateUrl: 'tpl.myapp.html'
        }
    }
})
// III. we target explicit parent unnamed view - absolute notation
.state('myapp', {
    abstract: true,
    views : {
        '@': { // before @ is view name, after @ is state name, empty for root
            templateUrl: 'tpl.myapp.html'
        }
    }
})

我们可以看到，对于 'myapp' 状态，我们使用了不同的 templateUrl: 'tpl.myapp.html'。它的内容与index.html不同，可能是：

<div>
  <h2>the root myapp template</h2>

  place for child states:
  <div ui-view="main"></div>

</div>

现在我们只能以明确的方式定位此视图（但可以是相对的或绝对的：

  .state('myapp.home', {
      url: "/",
      views: {
        // could be "main@myapp" as well
        "main": {
          controller: 'HomeCtrl',
          templateUrl: 'includes/home.html'
        }
      }
  })

查看示例here

在此处阅读更多相关信息：

How do I prevent reload on named view, when state changes? AngularJS UI-Router

使用 ui-router 在父视图中注入模板

Inject a template in parent's view with ui-router

state

nested

angularjs

angular-ui-router