feat(chips): trigger ng-change on chip addition/removal (#11237)

* Add test of `ng-change` for `md-chips`
* Add docs regarding `ng-change` for `md-chips` and `md-contact-chips`
* Add demo for ng-change on `md-chips`
* Add demo for ng-change on `md-contact-chips`

Closes #11161
Closes #3857

Author: Splaktar

src/components/chips/chips.spec.js

@@ -12,6 +12,8 @@ describe('<md-chips>', function() {
     '<md-chips ng-model="items" md-on-remove="removeChip($chip, $index, $event)"></md-chips>';
   var CHIP_SELECT_TEMPLATE =
     '<md-chips ng-model="items" md-on-select="selectChip($chip)"></md-chips>';
+  var CHIP_NG_CHANGE_TEMPLATE =
+    '<md-chips ng-model="items" ng-change="onModelChange(items)"></md-chips>';
   var CHIP_READONLY_TEMPLATE =
     '<md-chips ng-model="items" readonly="isReadonly"></md-chips>';
   var CHIP_READONLY_AUTOCOMPLETE_TEMPLATE =
@@ -204,6 +206,27 @@ describe('<md-chips>', function() {
         expect(scope.removeChip.calls.mostRecent().args[2].type).toBe('click');
       });
 
+      it('should trigger ng-change on chip addition/removal', function() {
+        var element = buildChips(CHIP_NG_CHANGE_TEMPLATE);
+        var ctrl = element.controller('mdChips');
+
+        scope.onModelChange = jasmine.createSpy('onModelChange');
+
+        element.scope().$apply(function() {
+          ctrl.chipBuffer = 'Melon';
+          simulateInputEnterKey(ctrl);
+        });
+        expect(scope.onModelChange).toHaveBeenCalled();
+        expect(scope.onModelChange.calls.mostRecent().args[0].length).toBe(4);
+
+        element.scope().$apply(function() {
+          ctrl.removeChip(0);
+        });
+        expect(scope.onModelChange).toHaveBeenCalled();
+        expect(scope.onModelChange.calls.mostRecent().args[0].length).toBe(3);
+      });
+
+
       it('should call the select method when selecting a chip', function() {
         var element = buildChips(CHIP_SELECT_TEMPLATE);
         var ctrl = element.controller('mdChips');
@@ -1686,7 +1709,7 @@ describe('<md-chips>', function() {
       return scope.fruits.filter(function(item) {
         return item.toLowerCase().indexOf(searchText.toLowerCase()) === 0;
       });
-    }
+    };
   }
 
   function simulateInputEnterKey(ctrl) {

src/components/chips/demoBasicUsage/index.html

@@ -22,6 +22,11 @@ <h2 class="md-title">Use the default chip template.</h2>
 
     <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable"></md-chips>
 
+    <br/>
+    <h2 class="md-title">Use ng-change</h2>
+
+    <md-chips ng-model="ctrl.ngChangeFruitNames" ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)" 
+      md-removable="ctrl.removable"></md-chips>
 
     <br/>
     <h2 class="md-title">Make chips editable.</h2>

src/components/chips/demoBasicUsage/script.js

@@ -14,6 +14,7 @@
 
     // Lists of fruit names and Vegetable objects
     self.fruitNames = ['Apple', 'Banana', 'Orange'];
+    self.ngChangeFruitNames = angular.copy(self.fruitNames);
     self.roFruitNames = angular.copy(self.fruitNames);
     self.editableFruitNames = angular.copy(self.fruitNames);
 
@@ -39,5 +40,9 @@
         type: 'unknown'
       };
     };
+
+    self.onModelChange = function(newModel) {
+      alert('The model has changed');
+    };
   }
 })();

src/components/chips/demoContactChips/index.html

@@ -3,6 +3,7 @@
   <md-content class="md-padding autocomplete" layout="column">
     <md-contact-chips
         ng-model="ctrl.contacts"
+        ng-change="ctrl.onModelChange(ctrl.contacts)"
         md-contacts="ctrl.querySearch($query)"
         md-contact-name="name"
         md-contact-image="image"

src/components/chips/demoContactChips/script.js

@@ -25,6 +25,7 @@
 
     self.querySearch = querySearch;
     self.delayedQuerySearch = delayedQuerySearch;
+    self.onModelChange = onModelChange;
 
     /**
      * Search for contacts; use a random delay to simulate a remote call
@@ -84,6 +85,10 @@
 
     }
 
+    function onModelChange(model) {
+      alert('The model has changed');
+    }
+
     function loadContacts() {
       var contacts = [
         'Marina Augustine',

src/components/chips/js/chipsController.js

@@ -328,7 +328,7 @@ MdChipsCtrl.prototype.getCursorPosition = function(element) {
 MdChipsCtrl.prototype.updateChipContents = function(chipIndex, chipContents){
   if(chipIndex >= 0 && chipIndex < this.items.length) {
     this.items[chipIndex] = chipContents;
-    this.ngModelCtrl.$setDirty();
+    this.updateNgModel();
   }
 };
 
@@ -484,9 +484,7 @@ MdChipsCtrl.prototype.appendChip = function(newChip) {
   var length = this.items.push(newChip);
   var index = length - 1;
 
-  // Update model validation
-  this.ngModelCtrl.$setDirty();
-  this.validateModel();
+  this.updateNgModel();
 
   // If they provide the md-on-add attribute, notify them of the chip addition
   if (this.useOnAdd && this.onAdd) {
@@ -585,6 +583,13 @@ MdChipsCtrl.prototype.validateModel = function() {
   this.ngModelCtrl.$validate(); // rerun any registered validators
 };
 
+MdChipsCtrl.prototype.updateNgModel = function() {
+  this.ngModelCtrl.$setViewValue(this.items.slice());
+  // TODO add the md-max-chips validator to this.ngModelCtrl.validators so that
+  // the validation will be performed automatically on $viewValue change
+  this.validateModel();
+};
+
 /**
  * Removes the chip at the given index.
  * @param {number} index
@@ -593,9 +598,7 @@ MdChipsCtrl.prototype.validateModel = function() {
 MdChipsCtrl.prototype.removeChip = function(index, event) {
   var removed = this.items.splice(index, 1);
 
-  // Update model validation
-  this.ngModelCtrl.$setDirty();
-  this.validateModel();
+  this.updateNgModel();
 
   if (removed && removed.length && this.useOnRemove && this.onRemove) {
     this.onRemove({ '$chip': removed[0], '$index': index, '$event': event });

src/components/chips/js/chipsDirective.js

@@ -96,7 +96,8 @@
    *
    * Please refer to the documentation of this option (below) for more information.
    *
-   * @param {string|object=} ng-model A model to which the list of items will be bound.
+   * @param {string=|object=} ng-model A model to which the list of items will be bound.
+   * @param {expression=} ng-change AngularJS expression to be executed on chip addition/removal.
    * @param {string=} placeholder Placeholder text that will be forwarded to the input.
    * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,
    *    displayed when there is at least one item in the list

src/components/chips/js/contactChipsDirective.js

@@ -17,6 +17,7 @@ angular
  * appearance of the matched text inside of the contacts' autocomplete popup.
  *
  * @param {string=|object=} ng-model A model to bind the list of items to
+ * @param {expression=} ng-change AngularJS expression to be executed on chip addition/removal
  * @param {string=} placeholder Placeholder text that will be forwarded to the input.
  * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,
  *    displayed when there is at least on item in the list
@@ -57,6 +58,7 @@ angular
 var MD_CONTACT_CHIPS_TEMPLATE = '\
       <md-chips class="md-contact-chips"\
           ng-model="$mdContactChipsCtrl.contacts"\
+          ng-change="$mdContactChipsCtrl.ngChange($mdContactChipsCtrl.contacts)"\
           md-require-match="$mdContactChipsCtrl.requireMatch"\
           md-chip-append-delay="{{$mdContactChipsCtrl.chipAppendDelay}}" \
           md-autocomplete-snap>\
@@ -122,6 +124,7 @@ function MdContactChips($mdTheming, $mdUtil) {
       contactImage: '@mdContactImage',
       contactEmail: '@mdContactEmail',
       contacts: '=ngModel',
+      ngChange: '&',
       requireMatch: '=?mdRequireMatch',
       minLength: '=?mdMinLength',
       highlightFlags: '@?mdHighlightFlags',