Angular JS 将子作用域变量更改传播到父作用域 [英] Angular JS propagate child scope variable changes to parent scope
问题描述
尽管在 ChildCtrl 中实例化了一个新"变量,我如何进行变量更改并轻松地将它们传播回 ParentCtrl?最小或没有 $on 和 $watch 的额外积分(使其更容易实现)
父控件
ChildCtrl/ChildCtrl2/ChildCtrl3/ChildCtrl4
- 查看
我的 ChildCtrl 的不同之处在于我无法轻松抽象出主布局和 ng-view,但它们都依赖于 ParentCtrl 中的相同功能.
$scope.searchTerms 在 ParentCtrl 中定义,但带有 ng-model='searchTerms' 的输入框在子控制器的视图中.当此 var 更改时,它不会反映在 ParentCtrl 中,仅反映在 ChildCtrls 中.
示例:http://jsfiddle.net/JHwxP/22/
HTML 部分
<div ng-controller="父级">parentX = {{x}}
parentY = {{y}}
<div ng-controller="孩子">childX = {{x}}
childY = {{y}}
<a ng-click="modifyBothScopes()">modifyBothScopes</a><br><br>此处的更改需要出现在父级"中.<输入ng-model='y'>
控制器
function Parent($scope) {$scope.x= 5;$scope.y= 5;}函数子($scope){$scope.modifyBothScopes= function() {$scope.$parent.x++;};}
更新
我目前正在尝试一种共享服务方法:https://gist.github.com/exclsr/3595424
更新
尝试发射/广播系统
已解决问题:我将 $scope.searchTerms 存储在父级中,并在更改时在子级 $scope 中创建了一个空间.
解决办法:我应该在父级中执行 $scope.search.terms 并且在子级中更改时它会冒泡到父级.
示例:http://jsfiddle.net/JHwxP/23/
这是原型继承的工作原理造成的.
当您在子控制器中请求 $scope.x
时,它会检查是否在其作用域中定义了 x,如果没有,则在父作用域中查找 x.
如果您分配给子作用域的 x
属性,它只会修改子作用域.
处理此问题并获得共享行为的一种简单方法是使用对象或数组.
function ParentCtrl($scope) {$scope.model = {x: 5, y: 5};}函数 ChildCtrl($scope) {$scope.update = 函数(x,y){$scope.model.x = x;$scope.model.y = y;};}
在这里,更改将在两个作用域中都可见,因为 $scope.model
将在父作用域和子作用域中引用同一个对象.
John Lindquist 有一个关于此的视频.
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
ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4
- View
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 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.
Example: http://jsfiddle.net/JHwxP/22/
HTML Partial
<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>
Controllers
function Parent($scope) {
$scope.x= 5;
$scope.y= 5;
}
function Child($scope) {
$scope.modifyBothScopes= function() {
$scope.$parent.x++;
};
}
UPDATE
I'm currently attempting a shared service approach: https://gist.github.com/exclsr/3595424
UPDATE
Trying an emit/broadcast system
SOLVED Problem: I was storing $scope.searchTerms in the parent and when changed created a space in the child $scope.
Solution: I should have done $scope.search.terms in the parent and when changed in the child it would bubble up to the parent.
Example: http://jsfiddle.net/JHwxP/23/
This is due to how prototypal inheritance works.
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.
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;
};
}
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.
这篇关于Angular JS 将子作用域变量更改传播到父作用域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!