ui路由器-带有共享控制器的嵌套视图

一尘不染

ui路由器-带有共享控制器的嵌套视图

angularjs

我有一个抽象的父视图，该视图旨在与其嵌套视图共享一个控制器。

.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。

我的猜测是editController正在为每个视图创建一个新的实例，但是我不确定为什么或如何修复它。

阅读 211

2020-07-04

共1个答案

一尘不染

这里的问题与以下问答有关：如何在angularjs ui-router中的状态之间共享$scope数据？。

解决方法隐藏在：

了解范围

在AngularJS中，子作用域通常在原型上从其父作用域继承。
…

有一个 ‘。’ 在您的模型中，将确保原型继承在起作用。

// So, use
<input type="text" ng-model="someObj.prop1"> 
// rather than
<input type="text" ng-model="prop1">.

还有这个

[仅按视图层次结构的作用域继承](https://github.com/angular-ui/ui-router/wiki/Nested-

States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only)

请记住，如果状态的视图是嵌套的，则范围属性仅沿状态链继承。范围属性的继承与状态的嵌套无关，而与视图（模板）的嵌套无关。

完全有可能存在嵌套状态，这些状态的模板会在站点内各个非嵌套位置填充ui视图。在这种情况下，您不能期望在子状态的视图中访问父状态视图的范围变量。

有了我们应该在编辑控制器中执行此操作

controller('editController', function ($scope) {
  $scope.Model = $scope.Model || {SomeProperty : "xxx"};
})

而且我们甚至可以重用它controller: 'editController' （我们不必这样做，因为$ scope.Model将会存在-感谢继承）

.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将仅被初始化一次（在父级内部），并且可在任何地方使用

在这里检查这个类似的工作示例

2020-07-04