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.

推荐答案

这里的问题将与这个 Q &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-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.

我们应该在编辑控制器中做到这一点

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屋！