47

尽管在 ChildCtrl 中实例化了一个“新”变量，我如何才能进行变量更改并将它们轻松传播回 ParentCtrl？最少到没有 $on's 和 $watch's 的额外积分（使其更易于实施）

父控件

  • 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-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/

4

3 回答 3

87

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

当您在子控制器中请求时$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 对此有一个视频。

于 2013-06-06T22:31:02.797 回答
14

另一个不涉及创建一堆对象以通过引用传递的解决方案是在父控制器中创建 setter 函数。

function ParentCtrl($scope) {
  $scope.x = 5;
  $scope.y = 5;

  $scope.setX = function(value) {
    $scope.x = value;
  }

  $scope.setY = function(value) {
    $scope.y = value;
  }
}

function ChildCtrl($scope) {
  $scope.update = function(x, y) {
    $scope.setX(x);
    $scope.setY(y);
  };
}

当数据成为同一个对象的一部分可能没有意义时，我发现这更干净。

你也可以发疯，在孩子身上做这样的事情：

function ChildCtrl($scope) {
  var superSetX = $scope.setX;
  $scope.setX = function(value) {
    superSetX(value * 2);
  };
  ...
}
于 2013-06-06T23:28:46.443 回答
0

我一直在寻找这样的东西。第一个解决方案是在阅读后出现的。您可以与子控制器共享父模型。

这是一个例子。我什至使用一系列项目来证明我的观点。ChildController正在改变他的父母，就像他们都是同一个宇宙的一部分。

于 2013-10-26T21:31:55.723 回答