feat(contact-chips): add support for md-on-add/remove/select #10051
Comments
Up, still not working |
For the one who want to patch it: Add : md-on-add="$mdContactChipsCtrl.mdOnAdd()($chip)"\
md-on-remove="$mdContactChipsCtrl.onRemove()($chip)"\ to (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\ |
@skapin You interested in submitting a PR? This seems like a since/simple/safe addition :-) |
I can yes, but i need to overcheck it again, (especially if no func. is specified) |
Hello! |
An answer is above, check my previous post :) |
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. |
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. |
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. |
I can confirm the issue still persists with v1.1.5; would be great if it would be fixed. |
Yes, please put a PR together from the above and we'll try to get it merged. |
Actual Behavior:
What is the issue? *
md-contact-chips do not appear to support md-on-add/remove/select bindingsWhat is the expected behavior?
md-contact-chips should inherit functionality from md-chips, which do support these bindigsCodePen (or steps to reproduce the issue): *
CodePen Demo which shows your issue:
http://codepen.io/recursionbane/pen/dOWWOVDetails:
Adding, removing or selecting a chip should send messages to console.log(), but nothing happensAngular Versions: *
Angular Version:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.jsAngular Material Version:
https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.jsAdditional Information:
Browser Type: *
ChromeBrowser Version: *
54.0.2840.99 m (64-bit)OS: *
Windows 7 EnterpriseStack Traces:
NoneUPDATE: md-removable doesn't work, either!
The text was updated successfully, but these errors were encountered: