UI路由器 - 与共享控制器嵌套视图 [英] ui router - nested views with shared controller

问题描述

我有一个，就是与它嵌套视图共享一个控制器的抽象父视图。

  .STATE（编辑，{
    摘要：真实，
    网址：'/家/编辑/：身份证'，
    templateUrl：应用程序/模板/ editView.html'，
    控制器：'editController
}）
.STATE（'edit.details'，{
    网址：'/详细信息，
    templateUrl：应用程序/模板/ editDetailsView.html
}）
.STATE（'edit.info'，{
    网址：'/信息，
    templateUrl：应用程序/模板/ editInfoView.html
}）
 

路由按预期工作。

问题是，当我从嵌套视图之一更新 $范围变量，变化不会反映在视图中。当我做同样的从父视图，它工作正常。这不是局面需要一个 $适用。

我的猜测是正在为每个视图创建 editController 的新实例，但我不知道为什么或如何解决它。

解决方案

这里的问题就与此有关Q＆放大器; ？答：我如何分享angularjs UI路由器状态之间$范围数据

的方式如何解决它隐藏在：

了解作用域

  

在AngularJS，一个孩子正常的范围从中典型其父继承的范围。结果
   ...

  
  

有一个。在您的模型将确保原型继承中发挥作用。

  //所以，使用
＆LT;输入类型=文本NG模型=someObj.prop1＆GT;
// 而不是
＆LT;输入类型=文本NG模型=为prop1取代。
 

和也是这个

Scope通过视图层次只有

继承

  记

记住，如果你的国家的意见是嵌套作用域属性只继承下来的状态链。作用域属性的继承无关，与你的国家的嵌套和一切与你的视图（模板）嵌套。

  
  

这是完全可能的，你嵌套状态的模板填充在站点内的各种非嵌套位置UI的意见。在这种情况下，你不能指望子女国的意见内访问的父状态视图的范围变量。

说完，我们应该在编辑器做到这一点。

 控制器（'editController'，函数（$范围）{
  $ scope.Model = $ scope.Model || {SomeProperty：XXX};
}）
 

和我们甚至可以重复使用控制器：'editController的（我们没有，因为$ scope.Model将在那里 - 感谢继承）的

  .STATE（编辑，{
    摘要：真实，
    网址：'/家/编辑/：身份证'，
    templateUrl：应用程序/模板/ editView.html'，
    控制器：'editController
}）
.STATE（'edit.details'，{
    网址：'/详细信息，
    templateUrl：应用程序/模板/ editDetailsView.html'，
    控制器：'editController
}）
.STATE（'edit.info'，{
    网址：'/信息，
    templateUrl：应用程序/模板/ editInfoView.html'，
    控制器：'editController
}）
 

现在，同样的控制器将被实例化多次（母公司所有的孩子），但 $ scope.Model 将启动一次（父内侧）和可用无处不在

这里选中此类似的工作示例

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'
})

The routing works as expected.

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.

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.

解决方案

The issue here would be related to this Q & A: How do I share $scope data between states in angularjs ui-router?.

The way how to solve it is hidden in the:

Understanding Scopes

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

And also this

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.

Having that we should do this in edit Controller

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

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'
})

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

Check this similar working example here

这篇关于UI路由器 - 与共享控制器嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！