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

Question

I'm working on a an existing Angular application (1.4.3) and I'm trying to break things up into components that can be more re-usable and allow for a better upgrade path to Angular 2.

I've got a child component that takes an input from the parent and displays a table. In the table, that input has been plugged into various mathematical formulas and displays each of the resulting numbers. My problem is that when I update the parent value, the child component doesn't reflect the update. I thought bindToController was supposed to make is so that I didn't have to put a watch on the input. I also noticed things get weird if I'm using ng-model vs ng-bind in the template. Can anyone explain to me what's going on here and why?

Here's an example. http://jsbin.com/yoqenahini/1/edit?html,js,output

Answer 1

The reason the value isn't being updated in the child directive is that you are assigning the value to a new variable here:

this.item2 = this.item + 25;

and then your input is binding to the new value item2 .

Here's a fork of your code, I added a second input in the child directive that binds to item . When you change the parent value it also changes.

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

So if you just use the item property directly in your child controller you should be all set. Angular isn't going to re-run your assignment to item2 every time the parent value changes.

Answer 2

I ended up just adding a $watch on the input after coming across this comment chain. It's working great. I was just overly concerned about watches.

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

In reality, this works great and still feels better because the watch is inside the component opposed to on the page controller.

There is a quirk though if you are using controllerAs which I had to discover here. https://toddmotto.com/digging-into-angulars-controller-as-syntax/#ironing-a-quirk

Answer 3

what about

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

and then

in your child

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

see Todd Motto's explanation https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

see this Bin I prepared for you

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;
      });
    }
  };
}

and in your HTML just add this

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