Question

安装程序正在使用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状态以将内容加载到content根命名视图的overlay部分。我可以使用content@成功访问根内容视图described here。但是，似乎没有关于深入了解各州观点的任何文件。理想情况下，我想我会想要content@app(overview)之类的东西（假设()允许你选择一个命名视图然后进入它，或者content@app@overview。这两种方法都不起作用。

任何有关解决方案的建议或我缺失的基本内容都会非常感激

Answer 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指令应存在的模板的状态的引用。< / p>

因此，在此示例中，content@app表示在ui-view="content"州内的任何视图中查找app。

希望这是有道理的。

角度UI路由器根命名视图模板从子视图更改

1 个答案:

说明