Angular ui-router:为孩子保持相同的 ui-view [英] Angular ui-router: keep same ui-view for child
问题描述
我需要子状态能够使用父状态的解析功能.但我还需要为两个状态保持相同的 ui-view.这是一个小提琴.还有一个代码
I need child state be able to use parent state's resolve functions. But I also need to keep same ui-view for both states. Here's a fiddle. And there's a code
$stateProvider
.state('parent', {
url: "/",
template: '<p>Hello {{parent.one}}</p><br>'
+ '<button ng-click="goToChild()">child</button><br>',
// this one below work but I don't need it
// template: '<p>Hello {{parent.one}}</p><br>'
// + '<button ng-click="goToChild()">child</button><br>'
// + '<div ui-view></div>',
resolve: {
test: function() {
return 1;
}
},
controller: function($scope, $state, test) {
$scope.parent = { one: test };
$scope.goToChild = function() {
$state.go('parent.child');
}
}
})
.state('parent.child', {
url: "/child",
template: '<p>Hello {{child.one}}</p>',
controller: function($scope, test) {
$scope.child = { one: test };
}
})
$urlRouterProvider.otherwise('/');
推荐答案
答案应该在这两种状态定义中隐藏/显示:
The answer should be hidden/revealed in this two states definition:
.state('parent', {
url: "/",
views: {
'@': {
template: '<div ui-view=""></div>',
controller: function($scope, $state, test) {
$scope.parent = { one: test };
$scope.goToChild = function() {
$state.go('parent.child');
}
}
},
'@parent': {
template: '<p>Parent says: hello <pre>{{parent | json}}</pre></p>'
+ '<br><button ng-click="goToChild()">child</button><br>',
}
},
resolve: {
test: function() { return 1; },
},
})
子消费父解决方案，并拥有自己的
.state('parent.child', {
url: "^/child/:id",
template: '<p>Child says: hello <pre>{{child | json }}</pre></p>',
resolve: {
testChild: function() { return 2; },
},
controller: function($scope, test, testChild) {
$scope.child = {
one: test,
two : testChild,
parent: $scope.parent,
};
},
})
在此处查看
它是如何工作的?好吧，这一切都基于:
And how it works? Well, it all is based on the:
请记住，作用域属性仅在状态链下继承，如果您的状态的视图是嵌套的.范围属性的继承与状态的嵌套无关，而与视图(模板)的嵌套无关.
Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).
完全有可能您有嵌套状态，其模板在您网站内的各种非嵌套位置填充 ui-view.在这种情况下，您不能期望在子状态的视图中访问父状态的范围变量.
It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.
还有:
在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.
Behind the scenes, every view gets assigned an absolute name that follows a scheme of
viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
例如，前面的例子也可以写成:
For example, the previous example could also be written as:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
因此，上述文档引用是 plunker 的核心.父级使用多个视图，其中一个未命名 - 将用于继承.Parent 还将其自己的父"视图注入到该视图中.家长的决心已到位...
So, the above documentation cites are the core of the plunker. The parent uses multi views, one of them is unnamed - and will be used for inheritance. Parent also injects into that view its own "parent" view. The Resolve of a parent is in place...
子现在注入到其父的锚点，它确实拥有所有需要的东西.这意味着，该孩子确实继承了范围并解决了问题.它也显示了自己的决心......
Child now injects into anchor of its parent, which does have all the stuff needed. That means, that child does inherit scope and also resolve stuff. It shows its own resolve as well...
这篇关于Angular ui-router:为孩子保持相同的 ui-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
