Material: feat(contact-chips): add support for ng-change

[izeau]

Hi guys, here's a codepen showing the issue.

Basically, to trigger a function when the <md-contact-chips> updates, we (seemingly) have to use $scope.$watch, which I'm trying to avoid thorough the codebase. Can we have it working (or a similar attribute such as md-contact-change)?

[rgolea]

Try with $scope.$watchCollection or if not pass in a 3rd parameter as true:

$scope.$watchCollection('whatever', fn)
//or
$scope.$watch('whatever', fn, true);

[izeau]

Thanks for the heads up! But I’d really like it as an attribute.

[rgolea]

Well... You can always do a directive. The thing is that the actual ng-change is based on the view change and not on the model. Im not sure what is really the difference but this is the source code from ng-change :

var ngChangeDirective = valueFn({
  restrict: 'A',
  require: 'ngModel',
  link: function(scope, element, attr, ctrl) {
    ctrl.$viewChangeListeners.push(function() {
      scope.$eval(attr.ngChange);
    });
  }
});

You can always do something like this:

.directive('hardChange', function(){
    return {
        restrict: A,
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl){
            scope.$watchCollection(function(){
                 return ctrl;
            }, function(newVal, oldVal){
              if(newVal === oldVal) return;
              scope.$eval(attr.hardChange)
            });
       }
    };
});

Haven't tested it but if it doesn't work, this will for sure (hopefully :smile: ):

.directive('hardChange', function(){
    return {
        restrict: A,
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl){
            scope.$watch(function(){
                 return ctrl;
            }, function(newVal, oldVal){
              if(newVal === oldVal) return;
              scope.$eval(attr.hardChange)
            }, true);
       }
    };
});

Usage:
<ANY hard-change="fn()"></ANY>

[izeau]

Yeah sure but that looks to me like a feature Material could offer by itself!

[rgolea]

Do a fork and do a PR yourself if you want...

[typotter]

What we need to do here, is update the $viewValue of the ngModelCtrl on md-chips when the collection changes. This should not be too hard, and should make ng-change work for you.

[beazergood]

Hi peeps. I'm a bit of a noob when it comes to Github and how all this works. I've read this as it's not released yet and 1.1.0 is the target release for this functionality?... That correct?

[aleccool213]

any chance of this ever being done?

[avilaj]

Has this been fixed? we need this in order to subscribe to ngModel $viewChangeListeners.

[jmwilkinson]

Why was this closed? This issue isn't fixed.

[rhclayto]

This is still an issue.

[Splaktar]

Reopening this because the original PR was closed (not merged) and there has been a significant number of requests to reopen the issue here and in https://github.com/angular/material/issues/3580.

Does this comment provide an appropriate way of detecting changes via md-on-add and md-on-remove?

If those aren't sufficient and someone wants to open a PR with a fix, we'll take a look at it and try to get it merged. Before working on the PR though, please submit an updated CodePen that reproduces this issue with AngularJS 1.6.6 and AngularJS Material 1.1.7.