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

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

angularjs

Angularjs 角度UI路由器根命名视图模板从子视图更改,angularjs,angular-ui-router,Angularjs,Angular Ui Router,设置使用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>

设置使用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'
            }
        }
    })

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

我试图做的是启动

app.foo.add

状态，将内容加载到

overlay

根命名视图的

content

部分。我可以使用

content@

成功访问根目录视图。然而，似乎没有任何关于深入了解一个国家观点的文件。理想情况下，我会想象我想要类似

content@app（概述）

（假设

（）

允许您选择命名视图，然后进入其中，或者

content@app@概述

。两者都不起作用

如果我对您的问题做出了正确的解释，我将非常感谢您对解决方案或我遗漏的基本问题的任何建议，那么我认为这应该是可行的：

<!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>


angular.module（'app'，['ui.router']）.config（函数（$stateProvider）{
$stateProvider
.state（'应用程序'{
url:“/”，
摘要：没错，
观点：{
“叠加”：{
templateUrl:'overlay.html'
}
}
})
.state（'app.foo'{
url:'foo'，
观点：{
“内容”：{
templateUrl:'foo.content.html'
}
}
})
.state（'app.foo.add'{
url:“/add”，
观点：{
'content@app': {
templateUrl:'foo.add.content.html'
}
}
});
}).run（函数（$state）{
$state.go（'app.foo.add'）；
});
覆盖层
食物含量
Foo添加内容

解释我认为您的误解是

后面的符号代表什么。

前面的符号是您要匹配的视图的名称，

后面的符号是对ui视图指令应该存在的模板状态的引用

所以在这个例子中，

content@app

是指在

应用程序

状态中的任何视图中查找

ui view=“content”

希望这是有意义的。

啊，我还没有意识到它会搜索“任何视图”，对我的代码做了一些小改动（更新了视图名称以避免冲突）它正在工作，谢谢你，没问题。是的，我只是想说，你不应该调用所有有意义的

内容，因为我知道它们是可深度遍历的：P