角UI路由器：保持相同的用户界面视图儿童 [英] Angular ui-router: keep same ui-view for child
问题描述
我需要孩子的状态能够使用父状态的决心功能。但我也需要保持相同的用户界面，查看这两个州。这里有一个小提琴。并有一个code
$ stateProvider
.STATE（'父'，{
网址：/，
模板：'＆LT; P＆GT;您好{{parent.one}}＆LT; / P＆GT;＆LT; BR＆GT;'
+'＆LT;按钮NG点击=goToChild（）＆GT;子＆lt; /按钮＆GT;＆LT; BR＆GT;，
//下面这一个工作，但我并不需要它
//模板：'＆LT; P＆GT;您好{{parent.one}}＆LT; / P＆GT;＆LT; BR＆GT;'
// +'＆LT;按钮NG点击=goToChild（）＆GT;子＆lt; /按钮＆GT;＆LT; BR＆GT;'
// +'＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;，
解析：{
测试：功能（）{
返回1;
}
}，
控制器：函数（$范围，$状态，测试）{
$ scope.parent = {之一：测试};
$ scope.goToChild =功能（）{
$ state.go（'parent.child'）;
}
}
}）
.STATE（'parent.child'，{
网址：/子，
模板：'＆所述p为H.;你好{{child.one}}＆下; / P＆GT;'，
控制器：函数（$范围，测试）{
$ scope.child = {之一：测试};
}
}）
$ urlRouterProvider.otherwise（'/'）;
有
答案应该被隐藏/在这两种状态的定义揭示了：
父多的意见
.STATE（'父'，{
网址：/，
观点：{
'@'：{
模板：'＆LT;格UI视图=＆GT;＆LT; / DIV＆GT;，
控制器：函数（$范围，$状态，测试）{
$ scope.parent = {之一：测试};
$ scope.goToChild =功能（）{
$ state.go（'parent.child'）;
}
}
}，
@parent：{
模板：'＆LT; P＆GT;家长说：你好＆LT; pre＆GT; {{父| JSON}}＆LT; / pre＆GT;＆LT; / P＆GT;'
+'＆LT; BR＆GT;＆LT;按钮NG点击=goToChild（）＆GT;子＆lt; /按钮＆GT;＆LT; BR＆GT;，
}
}，
解析：{
测试：函数（）{返回1; }，
}，
}）
儿童消费父决心，有自己的
.STATE（'parent.child'，{
网址：^ /孩子/：ID
模板：'＆LT; P＆gt;儿童说：你好＆LT; pre＆GT; {{子| JSON}}＆LT; / pre＆GT;＆LT; / P＆GT;，
解析：{
testChild：函数（）{返回2; }，
}，
控制器：函数（$范围，测试testChild）{
$ scope.child = {
之一：测试，
二：testChild，
父：$ scope.parent，
};
}，
}）
检查一下这里
和它是如何工作的？那么，这一切是基于：
<一href=\"https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only\"相对=nofollow>通过范围视图层次只有
继承
请记住，作用域属性只继承回落的状态下链如果您的国家的意见是嵌套。作用域属性的的继承无关与你的国家的 嵌套的并一切与你的视图（模板）。嵌套
这是完全可能的您已经嵌套状态的模板，填入你的网站内的各种非嵌套位置UI的意见。在这种情况下的的你不能指望访问父状态的变量的作用域的儿童的意见中意见陈述。
和也：
<一href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names\"相对=nofollow>视图名称 - 相对与绝对名称
在幕后，每一个观点被分配遵循的方案绝对名称
视图名@ Statename的，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。
例如，在previous例如也可以写为：
.STATE（'报告'，{
观点：{
过滤器@：{}，
资料表@：{}，
图@：{}
}
}）所以，上述文件引用是的 plunker 的核心。父采用多视图，其中一个未命名 - 并且将用于继承。家长也注入到该视图自己的父母的说法。父母的决心很到位...
儿童现在注入到其母公司，里面确实有所有的东西需要的锚。这意味着，孩子不继承范围，也解决的东西。它显示了自己的决心，以及...
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('/');
解决方案There is a working plunker.
The answer should be hidden/revealed in this two states definition:
parent with multi views
.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; }, }, })
Child consuming parent resolve, and having its own
.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, }; }, })Check it here
And how it works? Well, it all is based on the:
Scope Inheritance by View Hierarchy Only
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).
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.
and also:
View Names - Relative vs. Absolute Names
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@': { } } })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...
这篇关于角UI路由器：保持相同的用户界面视图儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
