在AngularJS中将更改从子范围传播到父范围答案

【问题标题】：Propagate changes from child to parent scope in AngularJS在AngularJS中将更改从子范围传播到父范围
【发布时间】：2015-02-26 12:23:32
【问题描述】：

我正在将使用属性的对象从父范围传递到子范围，并且我希望将在子范围中所做的更改传播到父范围。

基本上这是父视图：

<foo oo-bar="object"></foo>

这是foo 指令：

angular.module('foo').directive('foo', function()
{
    return {
        restrict : 'E',
        templateUrl : ConfigService.path.views + '/table/projects.html',
        scope : {
            bar : '=ooBar'
        }
    }
}

问题是在父作用域中所做的更改会传播到子作用域，而不是相反。

例如，如果我尝试在子范围内使用$scope.bar = 4，则父级的bar 不会改变。

我的理解是，Angular 正在子范围内创建一个新的 bar，它与父范围内的 bar 没有链接。

如果是这样，我如何将更改传播回父范围？

我认为我可以使用回调函数，但我不确定这是最好的方法。

编辑：Plunker

【问题讨论】：

你有这方面的小提琴/plunker吗？
如何使用服务来解决这个问题？
@VinayK 我刚刚添加了一个 plunker 示例。

标签： angularjs

【解决方案1】：

我正在寻找的解决方案位于此处：Understanding Scopes

关键部分如下：

遵循always have a '.' in your ng-models 的“最佳实践”可以轻松避免原语的这个问题 - 观看 3 分钟。 Misko 演示了 ng-switch 的原始绑定问题。

有一个“。”在您的模型中将确保原型继承发挥作用。所以，使用 <input type="text" ng-model="someObj.prop1"> 而不是 <input type="text" ng-model="prop1">.

如果您真的想要/需要使用原语，有两种解决方法：

在子作用域中使用$parent.parentScopeProperty。这将阻止子作用域创建自己的属性。

在父作用域上定义一个函数，并从子作用域调用它，将原始值传递给父作用域（并非总是可能）

【讨论】：

它被称为隔离作用域是有原因的。在Child bar: {{ foo }}foo不是在隔离范围内，而是在parentCtrl的范围内。

【解决方案2】：

在父作用域中，您应该有一个对象不是原始值，在这种情况下，在子作用域中更改对象属性也会在 parent 中更新。让我带上小提琴

$scope.object = {};
$scope.bar = '' // wrong way its a primiive

Demo without object

Demo with object

【讨论】：

OP 的示例中没有子范围。 foo 与 bar 在同一范围内。
谢谢。 “应该有一个对象而不是原始值”是帮助我的一条信息！

【解决方案3】：

<parent ng-controller="parentCtrl">
  Parent bar: {{ bar }}
  <child foo="bar">
    Child bar: {{ foo }}
    <input type="text" ng-model="foo">
  </child>
</parent>

parent节点内的所有元素都将在parentCtrl的范围内编译。

{{ bar }} -- {{ foo }} 将在parentCtrl 的范围内进行评估。

最初在parentCtrl 中没有定义foo，因此它没有打印任何值。

当您在输入字段中键入时，ng-model 将在编译它 (ng-model) 的范围内（即 parentCtrl）创建一个变量 foo 并更新它。

现在我们在 parentCtrl 的作用域中有foo。

由于{{ foo }}是用parentCtrl的作用域编译的，所以会显示在文本框中输入的值。

双向绑定

scope : {
   foo: '='
}

这将在 parentCtrl 范围 bar 和 childCtrl 范围 foo 变量之间创建双向绑定。

如果您在子指令的链接函数中更改 foo 的值。它将更新 parentCtrl 范围内的 bar 值。

【讨论】：