Angular UI Router根命名视图模板从子视图更改 [英] Angular UI Router root named view template change from child view
问题描述
安装程序使用的是Angular v1.5.8和ui-router v0.3.1.我的根视图有几个命名部分(为简洁起见，我将其中的一些部分删除了).看起来像这样
Setup is using Angular v1.5.8, and ui-router v0.3.1 . My root view has several named sections (ive removed a number of them for brevity). It looks like this
<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>
我的状态控制器看起来像这样
My state controller looks like this
$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)看起来像这样
My overlay view template (main.overlay.html) looks like this
<a class="close">×</a>
<div ui-view="content"></div> <!-- <-- LOAD CONTENT INTO HERE -->
Im试图做的是，当启动app.foo.add状态以将内容加载到名为overlay的根视图的content部分中时.我可以使用content@成功访问根内容视图，如此处所述.但是，似乎没有任何有关深入了解国家观点的文档.理想情况下，我想我会想要类似content@app(overview)的东西(假设()允许您选择一个命名视图，然后进入该视图，或者也许是content@app@overview.两者都不起作用.
What Im trying to do is when the app.foo.add state is initiated to load content into the content section of the overlay root named view. I can access the root content view using content@ successfully as described here. However, there doesnt seem to be any documentation about traversing into a states's view deeply. Ideally i would imagine i would want something like content@app(overview) (assuming that () allowed you to select a named view and then go into it, or perhaps content@app@overview. Neither of which work.
任何对解决方案的建议或一些根本缺少的东西将不胜感激
Any suggestions for a solution or something fundamental that im missing would be greatly appreciated
推荐答案
如果我正确解释了您的问题，那么我认为这应该可行:
If I've interpreted your problem correctly, then I think this should work:
<!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指令应位于的模板状态的引用.
Explanation
I think the misunderstanding you have is what the symbol after the @ stands for. The symbol before the @ is the name of the view you want to match, and the symbol after the @ is a reference to the state in which the template the ui-view directive should exist in.
因此，在此示例中，content@app表示在app状态内的任何视图中查找ui-view="content".
So in this example, content@app is saying look for ui-view="content" inside any of the views inside the app state.
希望这是有道理的.
这篇关于Angular UI Router根命名视图模板从子视图更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
