Angular JS将子范围变量更改传播到父范围

Question

尽管在ChildCtrl中实例化了一个“新”变量，我如何进行变量更改并将其轻松传播回ParentCtrl？加分点数最少，甚至没有$ on和$
watch（使其更易于实现）

ParentCtrl

• ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4

  • 视图

我的ChildCtrl的区别就足够大了，我无法轻松抽象出主布局和ng-view，但是它们都依赖于ParentCtrl中的相同功能。

$ scope.searchTerms是在ParentCtrl中定义的，但是带有ng-model
=’searchTerms’的输入框在子控制器的视图中。当该变量更改时，它不会仅反映在ChildCtrls中，而不会反映在ParentCtrl中。

示例：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

更新

尝试发射/广播系统

解决的问题：我将$ scope.searchTerms存储在父级中，更改后在子级$ scope中创建了一个空间。

解决方案：我应该在父级中完成$ scope.search.terms，并且在子级中进行更改时，它会冒泡到父级。

示例：http：//jsfiddle.net/JHwxP/23/

Answer 1

这是由于原型继承是如何工作的。

当您$scope.x在子控制器中请求时，它会检查x是否在其作用域中定义，如果未定义，则在父作用域中查找x。

如果您分配给子范围的x属性，则只会修改子范围。

解决此问题并获得共享行为的一种简单方法是使用对象或数组。

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将在父范围和子范围中都引用同一对象。

约翰·林德奎斯特（John Lindquist）对此有视频。