- 首页
- 其他开发
- Angular UI Router root 命名视图模板从子视图更改
Angular UI Router root 命名视图模板从子视图更改
[英] Angular UI Router root named view template change from child view
本文介绍了Angular UI Router root 命名视图模板从子视图更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
安装程序使用 Angular v1.5.8 和 ui-router v0.3.1.我的根视图有几个命名部分(为简洁起见，我删除了其中的一些).看起来像这样
<div id="main"><div id="覆盖"><section id="overlay__content" ui-view="overlay"></section>
<div id="内容"><section id="content__content" ui-view="content"></section>
</节>
我的状态控制器看起来像这样
$stateProvider.state('应用',{网址:'/'，摘要:真实，意见:{'覆盖':{templateUrl: partialsUrl + 'main.overlay.html',//<-- 内容如下控制器:'叠加控制器'，控制器为:'vm'}}}).state('app.foo', {网址:'富'，意见:{'内容@': {templateUrl: partialsUrl + 'foo.main.html',控制器:'FooController'，控制器为:'vm'}}}).state('app.foo.add', {网址:'/添加'，意见:{'content@overlay':{//<-- 不起作用templateUrl: partialsUrl + 'foo.add.html',控制器:'FooAddController'，控制器为:'vm'}}})
我的叠加视图模板 (main.overlay.html) 看起来像这样
×</a><div ui-view="内容"></div><!-- <-- 将内容加载到此处-->
我试图做的是当 app.foo.add 状态被启动以将内容加载到 overlay 的 content 部分时根命名视图.我可以使用 content@ 作为 此处描述.但是，似乎没有任何关于深入了解状态视图的文档.理想情况下，我会想象我想要像 content@app(overview) 之类的东西(假设 () 允许您选择一个命名视图，然后进入它，或者 ()code>content@app@overview.两者都不起作用.
对于解决方案或我缺少的基本内容的任何建议将不胜感激
解决方案
如果我正确解释了您的问题，那么我认为这应该可行:
<头><script src="bower_components/angular/angular.js"></script><script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script><脚本>angular.module('app', ['ui.router']).config(function($stateProvider){$stateProvider.state('应用程序', {网址:'/'，摘要:真实，意见:{'覆盖':{templateUrl: 'overlay.html'}}}).state('app.foo', {网址:'富'，意见:{'内容@': {模板网址:'foo.content.html'}}}).state('app.foo.add', {网址:'/添加'，意见:{'内容@应用':{templateUrl: 'foo.add.content.html'}}});}).运行(函数($状态){$state.go('app.foo.add');});<body ng-app="app"><div ui-view="overlay">
<div ui-view="内容">
<script type="text/ng-template" id="overlay.html"><h1>叠加</h1><div ui-view="内容"></div><script type="text/ng-template" id="foo.content.html"><h1>Foo 内容</h1><script type="text/ng-template" id="foo.add.content.html"><h1>Foo 添加内容</h1></html>
<小时>
说明
我认为您的误解是 @ 后面的符号代表什么.@前的符号是你要匹配的视图的名称，@后的符号是模板ui-view所在状态的引用指令应该存在于.
所以在这个例子中，content@app 是说在 appui-view="content"> 状态.
希望这是有道理的.
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'
}
}
})
My overlay view template (main.overlay.html) looks like this
<a class="close">×</a>
<div ui-view="content"></div> <!-- <-- LOAD CONTENT INTO HERE -->
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>
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.
So in this example, content@app is saying look for ui-view="content" inside any of the views inside the app state.
Hopefully that made sense.
这篇关于Angular UI Router root 命名视图模板从子视图更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
