feat(contact-chips): add support for md-on-add/remove/select

[recursionbane]

Actual Behavior:

• What is the issue? * md-contact-chips do not appear to support md-on-add/remove/select bindings
• What is the expected behavior? md-contact-chips should inherit functionality from md-chips, which do support these bindigs

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/recursionbane/pen/dOWWOV
• Details: Adding, removing or selecting a chip should send messages to console.log(), but nothing happens

Angular Versions: *

• Angular Version: https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js
• Angular Material Version: https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 54.0.2840.99 m (64-bit)
• OS: * Windows 7 Enterprise
• Stack Traces: None

UPDATE: md-removable doesn't work, either!

[skapin]

Up, still not working

[skapin]

For the one who want to patch it:

Add :

md-on-add="$mdContactChipsCtrl.mdOnAdd()($chip)"\
md-on-remove="$mdContactChipsCtrl.onRemove()($chip)"\

to MD_CONTACT_CHIPS_TEMPLATE in angular-material

(like this)

var MD_CONTACT_CHIPS_TEMPLATE = '\
      <md-chips class="md-contact-chips"\
          ng-model="$mdContactChipsCtrl.contacts"\
          md-require-match="$mdContactChipsCtrl.requireMatch"\
          md-on-add="$mdContactChipsCtrl.mdOnAdd()($chip)"\
          md-on-remove="$mdContactChipsCtrl.onRemove()($chip)"\
          md-autocomplete-snap>\
          <md-autocomplete\

[topherfangio]

@skapin You interested in submitting a PR? This seems like a since/simple/safe addition :-)

[skapin]

I can yes, but i need to overcheck it again, (especially if no func. is specified)

[daniymilner]

Hello! Can we get a solution of this problem?

[skapin]

An answer is above, check my previous post :)

[skapin]

For the glory of satan, I repost updated for easy use :

var MD_CONTACT_CHIPS_TEMPLATE = '\
      <md-chips class="md-contact-chips"\
          ng-model="$ContactChipsCtrl.contacts"\
          md-require-match="$ContactChipsCtrl.requireMatch"\
          md-max-chips="{{$ContactChipsCtrl.maxChips}}"\
          md-on-add="$ContactChipsCtrl.mdOnAdd()($chip)"\
          md-on-remove="$ContactChipsCtrl.mdOnRemove()($chip)"\
          md-autocomplete-snap>\

AND then in the Ctrl :

return {
    template: function(element, attrs) {
      return MD_CONTACT_CHIPS_TEMPLATE;
    },
    restrict: 'E',
    controller: 'ContactChipsCtrl',
    controllerAs: '$ContactChipsCtrl',
    bindToController: true,
    compile: compile,
    scope: {
      contactQuery: '&mdContacts',
      placeholder: '@',
      secondaryPlaceholder: '@',
      contactName: '@mdContactName',
      contactImage: '@mdContactImage',
      contactEmail: '@mdContactEmail',
      mdOnAdd: '&',    /** This is new **/
      mdOnRemove: '&',  /** This is new **/
      contacts: '=ngModel',
      maxChips: '@?mdMaxChips',
      requireMatch: '=?mdRequireMatch',
      highlightFlags: '@?mdHighlightFlags'
    }
  };

Feel free to update and share. I use this code in a redefined ctrl to avoid colision with existing one. I changed some name to post it here as much generic as possible.

[edgartheunready]

I'd like to upvote this fix. Do we just need a PR put together? I blew 4+ hour on this issue today assuming that md-contact-chips conformed to the same interface as md-chips (because I didn't know there was a difference.) Especially since on the documentation md-chips and md-contact-chips are presented on the same demo page: https://material.angularjs.org/latest/demo/chips

This is all coming from a newby to this project.

[batsauto]

In my opinion, switching to angular material >= 1.1.2 fixes this issue. Maybe I don't completely understand but I think this is resolved.

[tux1337]

I can confirm the issue still persists with v1.1.5; would be great if it would be fixed. md-contact-chips should have the same functionality than md-chips

[Splaktar]

Yes, please put a PR together from the above and we'll try to get it merged.