fix(gridlist): The gridlist will now lay out everytime a tile is added

Fixes #2227. Closes #2304.

Author: Scott Hyndman

src/components/gridList/demoDynamicTiles/index.html

@@ -1,5 +1,4 @@
 <div ng-app="gridListDemo" ng-controller="gridListDemoCtrl as vm" flex>
-  <md-button ng-click="vm.rotate()">Rotate</md-button>
   <md-grid-list
         md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
         md-row-height-gt-md="1:1" md-row-height="4:3"

src/components/gridList/demoDynamicTiles/script.js

@@ -9,10 +9,6 @@ angular
             background: ""
           });
 
-    this.rotate = function() {
-      this.tiles.unshift(this.tiles.pop());
-    };
-
     function buildGridModel(tileTmpl){
       var it, results = [ ];
 

src/components/gridList/gridList.js

@@ -157,8 +157,12 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
     /**
      * Invokes the layout engine, and uses its results to lay out our
      * tile elements.
+     *
+     * @param {boolean} tilesAdded Whether tiles have been added since the last
+     *    layout. This is to avoid situations where tiles are replaced with
+     *    properties identical to their removed counterparts.
      */
-    function layoutDelegate() {
+    function layoutDelegate(tilesAdded) {
       var props = {
         tileSpans: getTileSpans(),
         colCount: getColumnCount(),
@@ -167,7 +171,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
         gutter: getGutter()
       };
 
-      if (angular.equals(props, lastLayoutProps)) {
+      if (!tilesAdded && angular.equals(props, lastLayoutProps)) {
         return;
       }
 
@@ -407,6 +411,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
 /* @ngInject */
 function GridListController($timeout) {
   this.invalidated = false;
+  this.tilesAdded = false;
   this.$timeout_ = $timeout;
   this.tiles = [];
   this.layoutDelegate = angular.noop;
@@ -420,6 +425,7 @@ GridListController.prototype = {
     } else {
       this.tiles.splice(idx, 0, tile);
     }
+    this.tilesAdded = true;
     this.invalidateLayout();
   },
 
@@ -442,9 +448,10 @@ GridListController.prototype = {
 
   layout: function() {
     try {
-      this.layoutDelegate();
+      this.layoutDelegate(this.tilesAdded);
     } finally {
       this.invalidated = false;
+      this.tilesAdded = false;
     }
   },