angularjs - Angular JS 将子作用域变量更改传播到父作用域

Question

尽管在 ChildCtrl 中实例化了"new"变量，但如何进行变量更改并轻松地将它们传播回 ParentCtrl？最少甚至没有 $on 和 $watch 的额外积分(使其更容易实现)

父Ctrl

• ChildCtrl/ChildCtrl2/ChildCtrl3/ChildCtrl4

  • 查看

我的 ChildCtrl 非常不同，我无法轻松抽象主布局和 ng-view，但它们都依赖于 ParentCtrl 中的相同功能。

$scope.searchTerms 在 ParentCtrl 中定义，但带有 ng-model='searchTerms' 的输入框位于子 Controller 的 View 中。当此变量更改时，它不会反射(reflect)在 ParentCtrl 中，只会反射(reflect)在 ChildCtrl 中。

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

Controller

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

这是由原型(prototype)继承的工作原理决定的。

当您在子 Controller 中请求 $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 将在父作用域和子作用域中引用同一对象。

约翰·林德奎斯特有一个 video on this .