ui 路由器 - 具有共享控制器的嵌套视图 [英] ui router - nested views with shared controller
问题描述
我有一个抽象的父视图,旨在与其嵌套视图共享一个控制器.
I have an abstract parent view that is meant to share a controller with its nested views.
.state('edit', {
abstract: true,
url: '/home/edit/:id',
templateUrl: 'app/templates/editView.html',
controller: 'editController'
})
.state('edit.details', {
url: '/details',
templateUrl: 'app/templates/editDetailsView.html'
})
.state('edit.info', {
url: '/info',
templateUrl: 'app/templates/editInfoView.html'
})
路由按预期工作.
问题是,当我从嵌套视图之一更新 $scope
变量时,更改不会反映在视图中.当我从父视图执行相同操作时,它工作正常.这不是需要 $apply
的情况.
The problem is that when I update a $scope
variable from one of the nested views, the change is not reflected in the view. When I do the same from the parent view, it works fine. This is not situation that requires an $apply
.
我的猜测是正在为每个视图创建一个新的 editController
实例,但我不确定为什么或如何修复它.
My guess is that a new instance of editController
is being created for each view, but I'm not sure why or how to fix it.
推荐答案
这里的问题应该和这个问答有关.A:如何在angularjs ui-router中的状态之间共享$scope数据?.
The issue here would be related to this Q & A: How do I share $scope data between states in angularjs ui-router?.
解决方法隐藏在:
在 AngularJS 中,子作用域通常从其父作用域原型继承.
...
In AngularJS, a child scope normally prototypically inherits from its parent scope.
...
有一个."在您的模型中将确保原型继承发挥作用.
Having a '.' in your models will ensure that prototypal inheritance is in play.
// So, use
<input type="text" ng-model="someObj.prop1">
// rather than
<input type="text" ng-model="prop1">.
还有这个
请记住,如果您的状态视图是嵌套的,则范围属性只会沿状态链继承.范围属性的继承与您的状态的嵌套无关,而与您的视图(模板)的嵌套有关.
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-views.在这种情况下,您不能期望在子状态视图中访问父状态视图的范围变量.
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.
我们应该在编辑控制器中这样做
Having that we should do this in edit Controller
controller('editController', function ($scope) {
$scope.Model = $scope.Model || {SomeProperty : "xxx"};
})
我们甚至可以重用那个 controller: 'editController'
(我们不必这样做,因为 $scope.Model 会在那里 - 感谢继承)
And we can even reuse that controller: 'editController'
(we can do not have to, because the $scope.Model will be there - thanks to inheritance)
.state('edit', {
abstract: true,
url: '/home/edit/:id',
templateUrl: 'app/templates/editView.html',
controller: 'editController'
})
.state('edit.details', {
url: '/details',
templateUrl: 'app/templates/editDetailsView.html',
controller: 'editController'
})
.state('edit.info', {
url: '/info',
templateUrl: 'app/templates/editInfoView.html',
controller: 'editController'
})
现在,同一个控制器将被多次实例化(父所有子),但 $scope.Model
将仅启动一次(在父内部)并且在任何地方都可用
Now, the same controller will be instantiated many times (parent all the children) but the $scope.Model
will be initiated only once (inside of parent) and available everywhere
在此处查看此类似工作示例
这篇关于ui 路由器 - 具有共享控制器的嵌套视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!