feat(chips): Add md-on-remove attribute.

Users have requsted a way to be notified when a chip is removed
from the list.

closes #3190

src/components/chips/chips.spec.js

@@ -5,6 +5,8 @@ describe('<md-chips>', function() {
  '<md-chips ng-model="items"></md-chips>';
  var CHIP_APPEND_TEMPLATE =
  '<md-chips ng-model="items" md-on-append="appendChip($chip)"></md-chips>';
+ var CHIP_REMOVE_TEMPLATE =
+ '<md-chips ng-model="items" md-on-remove="removeChip($chip, $index)"></md-chips>';
 
  describe('with no overrides', function() {
 
@@ -111,6 +113,23 @@ describe('<md-chips>', function() {
  expect(scope.items[3]).toBe('GrapeGrape');
  });
 
+ it('should call the remove method when removing a chip', function() {
+ var element = buildChips(CHIP_REMOVE_TEMPLATE);
+ var ctrl = element.controller('mdChips');
+
+ scope.removeChip = jasmine.createSpy('removeChip');
+
+ element.scope().$apply(function() {
+ ctrl.items = ['Grape'];
+ ctrl.removeChip(0);
+ });
+
+ expect(scope.removeChip).toHaveBeenCalled();
+ expect(scope.removeChip.calls.mostRecent().args[0]).toBe('Grape'); // Chip
+ expect(scope.removeChip.calls.mostRecent().args[1]).toBe(0); // Index
+ });
+
+
  it('should handle appending an object chip', function() {
  var element = buildChips(CHIP_APPEND_TEMPLATE);
  var ctrl = element.controller('mdChips');

src/components/chips/js/chipsController.js

@@ -199,6 +199,17 @@ MdChipsCtrl.prototype.useMdOnAppendExpression = function() {
  this.useMdOnAppend = true;
 };
 
+/**
+ * Sets whether to use the md-on-remove expression. This expression is
+ * bound to scope and controller in {@code MdChipsDirective} as
+ * {@code mdOnRemove}. Due to the nature of directive scope bindings, the
+ * controller cannot know on its own/from the scope whether an expression was
+ * actually provided.
+ */
+MdChipsCtrl.prototype.useMdOnRemoveExpression = function() {
+ this.useMdOnRemove = true;
+};
+
 /**
  * Gets the input buffer. The input buffer can be the model bound to the
  * default input item {@code this.chipBuffer}, the {@code selectedItem}
@@ -234,7 +245,11 @@ MdChipsCtrl.prototype.resetChipBuffer = function() {
  * @param index
  */
 MdChipsCtrl.prototype.removeChip = function(index) {
- this.items.splice(index, 1);
+ var removed = this.items.splice(index, 1);
+
+ if (removed && removed.length && this.useMdOnRemove && this.mdOnRemove) {
+ this.mdOnRemove({ '$chip': removed[0], '$index': index });
+ }
 };
 
 MdChipsCtrl.prototype.removeChipAndFocusInput = function (index) {

src/components/chips/js/chipsDirective.js

@@ -66,6 +66,8 @@
  * the input and delete buttons
  * @param {expression} md-on-append An expression expected to convert the input string into an
  * object when adding a chip.
+ * @param {expression} md-on-remove An expression which will be called when a chip has been
+ * removed.
  * @param {string=} delete-hint A string read by screen readers instructing users that pressing
  * the delete key will remove the chip.
  * @param {string=} delete-button-label A label for the delete button. Also hidden and read by
@@ -161,6 +163,7 @@
  placeholder: '@',
  secondaryPlaceholder: '@',
  mdOnAppend: '&',
+ mdOnRemove: '&',
  deleteHint: '@',
  deleteButtonLabel: '@',
  requireMatch: '=?mdRequireMatch'
@@ -244,6 +247,10 @@
  // when appending chips.
  if (attrs.mdOnAppend) mdChipsCtrl.useMdOnAppendExpression();
 
+ // If an `md-on-remove` attribute was set, tell the controller to use the expression
+ // when removing chips.
+ if (attrs.mdOnRemove) mdChipsCtrl.useMdOnRemoveExpression();
+
  // The md-autocomplete and input elements won't be compiled until after this directive
  // is complete (due to their nested nature). Wait a tick before looking for them to
  // configure the controller.