当父元素更改时，AngularJS更新子组件

Question

我正在开发一个现有的Angular应用程序（1.4.3），并且试图将它们分解为更可重用的组件，并允许更好地升级到Angular 2。

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

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

Answer 1

子指令中的值未更新的原因是，您正在此处将值分配给新变量：

this.item2 = this.item + 25;

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

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

http://jsbin.com/carolitajo/1/edit?html,js，输出

因此，如果您仅在子控制器中直接使用item属性，则应该一切就绪。 每次父值更改时，Angular都不会重新运行对item2的分配。

Answer 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

Answer 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，输出

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>