Question

尽管在ChildCtrl中实例化了一个“new”var，我怎样才能进行变量并轻松地将它们传播回ParentCtrl？最小到没有$ on和$ watch的额外积分（使其更容易实现）

ParentCtrl

ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4
- 查看

我的ChildCtrl是不同的，我不能轻易地抽象主布局和ng视图，但它们都依赖于ParentCtrl中的相同功能。

$ scope.searchTerms在ParentCtrl中定义，但带有ng-model ='searchTerms'的输入框位于子控制器的视图中。当这个var改变时，它不会在ParentCtrl中反映出ChildCtrls。

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>

控制器

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有video on this。

Answer 2

另一个不涉及创建一堆通过引用传递的对象的解决方案是在父控制器中创建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);
  };
  ...
}

Answer 3

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

Here is an example。我甚至使用一系列项目来证明我的观点。 ChildController 正在改变他的父母，就像他们都属于同一个宇宙一样。

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

3 个答案: