AngularJS - 子组件不更新父组件数据答案

【问题标题】：AngularJS - child component not updating parent component dataAngularJS - 子组件不更新父组件数据
【发布时间】：2018-11-18 17:31:37
【问题描述】：

我正在使用 AngularJS 1.5.3 编写应用程序

我有一个父组件，其中包含一些需要在子组件中更新的数据。现在，即使子组件上的输入框看起来正在更新，父组件中的数据也没有更新。

这是我的小提琴： https://jsfiddle.net/aubz88/ab85L19c/

这里是一些示例代码：

var grandChildComponent = {
  bindings: {
    min: '<',
    max: '<'
  },
    template: `
    <div>
      Grand Child component
      <input ng-model="$ctrl.min" />
      <input ng-model="$ctrl.max" />
    </div>
  `
};

【问题讨论】：

您应该在您的子组件和孙子组件中使用双向数据绑定 (=)。

标签： angularjs components

【解决方案1】：

那是因为您使用的是单向绑定（Reference docs here 和 helpful article here）。

如果您希望数据更新从父节点到子节点和从子节点到父节点，则需要使用符号= 进行双向数据绑定。

这是working JSFiddle

例如

var grandChildComponent = {
    bindings: {
        min: '=',
        max: '='
    },
    template: `
        <div>
            Grand Child component
            <input ng-model="$ctrl.min" />
            <input ng-model="$ctrl.max" />
        </div>
    `
};

【讨论】：