棱角分明的UI用户界面路由器 - 使用多个嵌套视图 [英] Angular-ui ui-router - using multiple nested views
问题描述
我想出来的UI插件路由器的嵌套视图功能,但遇到我不知道如何解决这个问题。
在code,显示问题可以在 http://jsfiddle.net/3c9h7/1/ <找到/ A>
I am trying out the nested views feature of ui-router plugin, but faced the issue I don't know how to solve. The code that shows the problem can be found at http://jsfiddle.net/3c9h7/1/ :
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider) {
return $stateProvider.state('root', {
template: "<div class='top' ui-view='viewA'></div><div class='middle' ui-view='viewB'></div>"
}).state('root.step1', {
url: '',
views: {
'viewA': {
template: '<h1>View A</h1>'
}
}
}).state('root.step1.step2', {
url: '/step2',
views: {
'viewB': {
template: '<h1>View B</h1>'
}
}
});
});
app.controller('MainCtrl', [
'$scope', '$state', function($scope, $state) {
$state.transitionTo('root.step1.step2');
}
]);
<div ng-app='myApp' ui-view ng-controller='MainCtrl'>
</div>
因此,code。通过使用$ state.go法(的https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options)
据UI路由器文档:
So, the code activates "root.step1.step2" state by using $state.go method(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options) According to ui-router documentation:
在该应用程序是在一个特定的状态时的状态
激活它的祖先状态 - 所有的隐式主动为好。
When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well.
所以,我希望root.step1和根将被激活,它工作正常,但viewB是不是充满了模板,你可以的jsfiddle样品中看到:上面viewA(根。步骤1)是确定的,但中间viewB(root.step1.step2)为空。
我做错了吗?
So, I expect that "root.step1" and "root" will be active and it works as expected, but "viewB" is not filled with the template as you can see in jsfiddle sample : the top viewA(root.step1) is OK, but the middle viewB(root.step1.step2) is empty. What I am doing wrong?
推荐答案
该文件说:
儿童国家将他们的模板加载到其父母的UI视图。
Child states will load their templates into their parent's ui-view.
所以应该有一个用户界面视图='viewB'
的viewA模板内,由于母公司状态 root.step1.step2
是 root.step1
。或者viewB应该是 root.step1
的意见之一,不应该有 root.step1.step2
So there should be a ui-view='viewB'
inside the viewA template, since the parent state of root.step1.step2
is root.step1
. Or the viewB should be one of the views of root.step1
, and there should be no root.step1.step2
.
这篇关于棱角分明的UI用户界面路由器 - 使用多个嵌套视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!