AngularJS在父元素更改时更新子组件答案

【问题标题】：AngularJS updating child component when parent element changesAngularJS在父元素更改时更新子组件
【发布时间】：2016-05-02 01:28:04
【问题描述】：

我正在开发一个现有的 Angular 应用程序 (1.4.3)，我正在尝试将其分解为更可重用的组件，并为 Angular 2 提供更好的升级路径。

我有一个子组件，它从父组件获取输入并显示一个表格。在表中，该输入已插入各种数学公式并显示每个结果数字。我的问题是，当我更新父值时，子组件不会反映更新。我认为bindToController 应该这样做，这样我就不必在输入上放手表了。我还注意到，如果我在模板中使用ng-model 和ng-bind，事情会变得很奇怪。谁能向我解释这里发生了什么以及为什么？

这是一个例子。 http://jsbin.com/yoqenahini/1/edit?html,js,output

【问题讨论】：

对此有任何答案吗？你能评论任何答案吗，为什么他们帮助/没有帮助等等......

标签： javascript angularjs data-binding angularjs-scope

【解决方案1】：

值没有在子指令中更新的原因是您在此处将值分配给一个新变量：

this.item2 = this.item + 25;

然后您的输入将绑定到新值 item2。

这是您的代码的一个分支，我在绑定到item 的子指令中添加了第二个输入。当您更改父值时，它也会更改。

http://jsbin.com/carolitajo/1/edit?html,js,output

因此，如果您直接在子控制器中使用 item 属性，您应该已经准备就绪。 Angular 不会在每次父值更改时重新分配给 item2。

【讨论】：

我也投了反对票，哈哈，这里的人都疯了，这就是为什么我想发布答案时想了很多。你永远不知道，你的答案和我的答案都是有效的，但他们不在乎，他们不回答任何问题，他们只是投反对票，他们就像猴子一样。

【解决方案2】：

在遇到此评论链后，我最终只是在输入中添加了 $watch。它工作得很好。我只是过度关注手表。

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html#comment-2446653932

实际上，这很好用，而且感觉更好，因为手表在组件内部，而不是在页面控制器上。

如果您使用的是我必须在这里发现的 controllerAs，但有一个怪癖。 https://toddmotto.com/digging-into-angulars-controller-as-syntax/#ironing-a-quirk

【讨论】：

【解决方案3】：

怎么样

$scope.$broadcast( "parentCtrlUpdateChild", args );

然后

在你的孩子身上

$scope.$on("parentCtrlUpdateChild", function(event, args) {
  ...
});

见 Todd Motto 的解释https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

看看我为你准备的这个垃圾桶

http://jsbin.com/zinuqikemo/edit?html,js,output

function parent() {
  return {
    restrict: 'E',
    template: '<div><div><input type="text" ng-model="item"/></div><ng-transclude></ng-transclude></div>',
    controllerAs: 'pctrl',
    transclude: true,
    controller: function($scope) {
      $scope.item = 25;
      $scope.hola = function() {
        $scope.item = $scope.item + 1;
        $scope.$broadcast('hola', $scope.item);
      };
    }
  };
}

function child() {
  return {
    restrict: 'E',
    scope: {
      item: '='
    },
    template: '<div><div><input type="text" ng-model="item2"/><div></div></div></div>',
    bindToController: true,
    controllerAs: 'cctrl',
    controller: function($scope) {      
      $scope.$on('hola', function (event, args) {
        $scope.item2 = args + 25;
      });
    }
  };
}

在你的 HTML 中添加这个

<button ng-click="hola()">HOLA</button>

【讨论】：