Question

我正在使用父作用域中的属性向子作用域传递一个对象，我希望在子作用域中进行的更改会传播到父作用域。

基本上这是父视图：

<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

Answer 1

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

关键部分如下：

通过遵循＆＃34;最佳实践＆＃34;可以很容易地避免使用原语这个问题。 always have a '.' in your ng-models - 观看3分钟。 Misko用ng-switch演示了原始绑定问题。

有一个＆＃39;。＆＃39;在你的模型中将确保原型继承发挥作用。所以，使用   <input type="text" ng-model="someObj.prop1">而非。{   <input type="text" ng-model="prop1">。

如果您确实需要/需要使用原语，则有两种解决方法：


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

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

Answer 2

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

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

Demo without object

Demo with object

Answer 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的范围进行评估。

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

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

现在我们在parentCtrl的范围内有foo。

由于使用parentCtrl的范围编译{{ foo }}，它将显示在文本框中输入的值。

双向绑定

scope : {
   foo: '='
}

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

如果在child指令的link函数中更改了foo的值。它将更新parentCtrl范围中的条形值。

在AngularJS中传播从子范围到父范围的更改

3 个答案: