Angular UI Router 根命名视图模板从子视图更改答案

【问题标题】：Angular UI Router root named view template change from child viewAngular UI Router 根命名视图模板从子视图更改
【发布时间】：2016-08-29 07:53:02
【问题描述】：

安装程序使用 Angular v1.5.8 和 ui-router v0.3.1 。我的根视图有几个命名部分（为简洁起见，我删除了其中的一些部分）。看起来是这样的

<section id="container">
    <div id="main">
        <div id="overlay">
            <section id="overlay__content" ui-view="overlay"></section>
        </div>
        <div id="content">
            <section id="content__content" ui-view="content"></section>
        </div>
    </div>
</section>

我的状态控制器是这样的

$stateProvider
    .state('app',{
        url: '/',
        abstract: true,
        views: {
            'overlay': {
                templateUrl: partialsUrl + 'main.overlay.html', // <-- content below
                controller: 'OverlayController',
                controllerAs: 'vm'
            }
        }
    })
    .state('app.foo', {
        url: 'foo',
        views: {
            'content@': {
                templateUrl: partialsUrl + 'foo.main.html',
                controller: 'FooController',
                controllerAs: 'vm'
            }
        }
    })
    .state('app.foo.add', {
        url: '/add',
        views:{
            'content@overlay':{ // <-- DOES NOT WORK
                templateUrl: partialsUrl + 'foo.add.html',
                controller: 'FooAddController',
                controllerAs: 'vm'
            }
        }
    })

我的叠加视图模板 (main.overlay.html) 看起来像这样

<a class="close">&times;</a>
<div ui-view="content"></div> <!-- <-- LOAD CONTENT INTO HERE -->

我试图做的是当app.foo.add 状态被启动以将内容加载到overlay 根命名视图的content 部分。我可以使用content@ 作为described here 成功访问根内容视图。但是，似乎没有任何关于深入了解一个国家的观点的文件。理想情况下，我想我会想要content@app(overview) 之类的东西（假设() 允许您选择一个命名视图然后进入它，或者可能是content@app@overview。两者都不起作用。

任何关于解决方案或我缺少的基本内容的建议将不胜感激

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

如果我正确地解释了您的问题，那么我认为这应该可行：

<!doctype html>
<html>
  <head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script>
      angular.module('app', ['ui.router']).config(function($stateProvider){
        $stateProvider
          .state('app', {
            url: '/',
            abstract: true,
            views: {
              'overlay': {
                templateUrl: 'overlay.html'
              }
            }
          })
          .state('app.foo', {
            url: 'foo',
            views: {
              'content@': {
                templateUrl: 'foo.content.html'
              }
            }
          })
          .state('app.foo.add', {
            url: '/add',
            views: {
              'content@app': {
                templateUrl: 'foo.add.content.html'
              }
            }
          });
      }).run(function($state){
        $state.go('app.foo.add');
      });
    </script>
  </head>
  <body ng-app="app">
    <div ui-view="overlay">

    </div>
    <div ui-view="content">

    </div>
    <script type="text/ng-template" id="overlay.html">
      <h1>Overlay</h1>
      <div ui-view="content"></div>
    </script>
    <script type="text/ng-template" id="foo.content.html">
      <h1>Foo Content</h1>
    </script>
    <script type="text/ng-template" id="foo.add.content.html">
      <h1>Foo Add Content</h1>
    </script>
  </body>
</html>

说明

我认为您的误解是@ 后面的符号代表什么。 @ 之前的符号是您要匹配的视图的名称，@ 之后的符号是对 ui-view 指令应该存在的模板状态的引用。

所以在本例中，content@app 表示在app 状态内的任何视图中查找ui-view="content"。

希望这是有道理的。

【讨论】：

啊，我没有意识到它会搜索“任何视图”，对我的代码进行了一些小改动（更新了视图名称以避免冲突）并且它正在工作，谢谢跨度>
没问题。是的，我只是想说你可能不应该把所有东西都叫content
这是有道理的，因为我知道它们是可深度遍历的：P