角JS传播子作用域变量的变化父范围 [英] Angular JS propagate child scope variable changes to parent scope
问题描述
我怎么能变量的变化,轻松地传播他们回到ParentCtrl尽管新变种在ChildCtrl被实例化?对公司和$手表没有$加分最少的(更容易实现)
How can I take variable changes and easily propagate them back to the ParentCtrl despite a 'new' var being instantiated in the ChildCtrl? Extra points for minimal to no $on's and $watch's (makes it easier to implement)
ParentCtrl
ParentCtrl
-
ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4
ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4
- 查看
我的ChildCtrl的只是不同的地方够我不能轻易抽象的总纲和NG-观点,但它们都依赖于ParentCtrl相同的功能。
My ChildCtrl's are just different enough where I can't easily abstract a master layout and a ng-view, but they all depend on the same functions in ParentCtrl.
$ scope.searchTerms在ParentCtrl定义,但与NG-模式='searchTerms'输入框是子控制器的看法。当这种变化VAR它不会反映在ParentCtrl只有ChildCtrls。
$scope.searchTerms is defined in ParentCtrl but the input box with ng-model='searchTerms' is in the view of the child controllers. When this var changes it's not reflected in the ParentCtrl only the ChildCtrls.
例如:
http://jsfiddle.net/JHwxP/22/
HTML部分
<div ng-app>
<div ng-controller="Parent">
parentX = {{x}} <br/>
parentY = {{y}}<br/>
<div ng-controller="Child">
childX = {{x}}<br/>
childY = {{y}}<br/>
<a ng-click="modifyBothScopes()">modifyBothScopes</a><br>
<br>
The changes here need to appear in 'Parent'. <input ng-model='y'>
</div>
</div>
</div>
控制器
function Parent($scope) {
$scope.x= 5;
$scope.y= 5;
}
function Child($scope) {
$scope.modifyBothScopes= function() {
$scope.$parent.x++;
};
}
更新
目前,我正在尝试共享服务的方法: https://gist.github.com/exclsr/3595424
I'm currently attempting a shared service approach: https://gist.github.com/exclsr/3595424
更新
尝试一个EMIT /广播系统
Trying an emit/broadcast system
解决
问题:
我是在父存储$ scope.searchTerms和改变时创建在子$范围的空间。
SOLVED Problem: I was storing $scope.searchTerms in the parent and when changed created a space in the child $scope.
解决方案:
我应该在父做了$ scope.search.terms而当孩子改变了它会冒泡到父。
Solution: I should have done $scope.search.terms in the parent and when changed in the child it would bubble up to the parent.
例如: http://jsfiddle.net/JHwxP/23/
推荐答案
这是由于如何原型继承工作。
This is due to how prototypal inheritance works.
当您在子控制器要求 $ scope.x
,它检查是否x是它的范围界定,如果没有,则查找在x父范围。
When you ask for $scope.x
in the child controller, it checks to see if x is defined on its scope, and if not, looks for x in the parent scope.
如果您分配给子范围的 X
属性,它只是改变了孩子的范围。
If you assign to the child scope's x
property, it only modifies the child scope.
这是简单的方法来处理这个并获得分享行为是使用一个对象或数组。
An easy way to deal with this and get the sharing behavior is to use an object or an array.
function ParentCtrl($scope) {
$scope.model = {x: 5, y: 5};
}
function ChildCtrl($scope) {
$scope.update = function(x, y) {
$scope.model.x = x;
$scope.model.y = y;
};
}
在这里,变化将是在这两个范围可见,因为 $ scope.model
将指向同一个对象在两个父母和孩子的作用域。
Here, the changes will be visible in both scopes, because $scope.model
will refer to the same object in both parent and child scopes.
约翰·林德奎斯特对这个一个视频。
John Lindquist has a video on this.
这篇关于角JS传播子作用域变量的变化父范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!