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

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

closes angular#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.