fix(mapType): options watch deep, is now watchCollection as it avoids…

… infinite digests
angular-ui · Oct 1, 2015 · 222e68f · 222e68f
1 parent cb2bb3a
commit 222e68f
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 20 deletions.
diff --git a/dist/angular-google-maps-street-view.js b/dist/angular-google-maps-street-view.js
@@ -1,4 +1,4 @@
-/*! angular-google-maps 2.2.1 2015-09-30
+/*! angular-google-maps 2.2.1 2015-10-01
  *  AngularJS directives for Google Maps
  *  git: https://github.com/angular-ui/angular-google-maps.git
  */

diff --git a/dist/angular-google-maps-street-view.min.js b/dist/angular-google-maps-street-view.min.js
diff --git a/dist/angular-google-maps-street-view_dev_mapped.js b/dist/angular-google-maps-street-view_dev_mapped.js
diff --git a/dist/angular-google-maps-street-view_dev_mapped.min.js b/dist/angular-google-maps-street-view_dev_mapped.min.js
diff --git a/dist/angular-google-maps.js b/dist/angular-google-maps.js
@@ -1,4 +1,4 @@
-/*! angular-google-maps 2.2.1 2015-09-30
+/*! angular-google-maps 2.2.1 2015-10-01
  *  AngularJS directives for Google Maps
  *  git: https://github.com/angular-ui/angular-google-maps.git
  */
@@ -4738,13 +4738,13 @@ Original idea from: http://stackoverflow.com/questions/22758950/google-map-drawi
               }
             };
           })(this), true);
-          this.scope.$watch('options', (function(_this) {
+          this.scope.$watchCollection('options', (function(_this) {
             return function(newValue, oldValue) {
               if (!_.isEqual(newValue, oldValue)) {
                 return _this.refreshMapType();
               }
             };
-          })(this), true);
+          })(this));
           if (angular.isDefined(this.attrs.refresh)) {
             this.scope.$watch('refresh', (function(_this) {
               return function(newValue, oldValue) {

diff --git a/dist/angular-google-maps.min.js b/dist/angular-google-maps.min.js
diff --git a/dist/angular-google-maps_dev_mapped.js b/dist/angular-google-maps_dev_mapped.js
@@ -1,4 +1,4 @@
-/*! angular-google-maps 2.2.1 2015-09-30
+/*! angular-google-maps 2.2.1 2015-10-01
  *  AngularJS directives for Google Maps
  *  git: https://github.com/angular-ui/angular-google-maps.git
  */
@@ -4738,13 +4738,13 @@ Original idea from: http://stackoverflow.com/questions/22758950/google-map-drawi
               }
             };
           })(this), true);
-          this.scope.$watch('options', (function(_this) {
+          this.scope.$watchCollection('options', (function(_this) {
             return function(newValue, oldValue) {
               if (!_.isEqual(newValue, oldValue)) {
                 return _this.refreshMapType();
               }
             };
-          })(this), true);
+          })(this));
           if (angular.isDefined(this.attrs.refresh)) {
             this.scope.$watch('refresh', (function(_this) {
               return function(newValue, oldValue) {

diff --git a/dist/angular-google-maps_dev_mapped.js.map b/dist/angular-google-maps_dev_mapped.js.map
diff --git a/dist/angular-google-maps_dev_mapped.min.js b/dist/angular-google-maps_dev_mapped.min.js
diff --git a/dist/angular-google-maps_dev_mapped.min.js.map b/dist/angular-google-maps_dev_mapped.min.js.map
diff --git a/example/issue_1542_cartodb.html b/example/issue_1542_cartodb.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src='../bower_components/lodash/lodash.min.js'></script>
+  <script src="../bower_components/angular/angular.js"></script>
+  <script src="../bower_components/angular-simple-logger/dist/index.js"></script>
+  <script src='../dist/angular-google-maps_dev_mapped.js'></script>
+
+  <style>
+  .angular-google-map-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    }
+
+  </style>
+
+</head>
+
+<body>
+  <div ng-app="mapsApp" ng-controller="MapCtrl">
+    <ui-gmap-google-map id="google.map" class="google" center='defaults.center' zoom='defaults.zoom' options='defaults.options' type='HYBRID' refresh="refresh">
+      <ui-gmap-map-type ng-if="layer" options="layer"></ui-gmap-map-type>
+    </ui-gmap-google-map>
+  </div>
+</body>
+
+<script>
+  //Angular App Module and Controller
+  angular.module('mapsApp', ['uiGmapgoogle-maps'])
+
+  .constant('mapDefaults', {
+    center: {
+      latitude: 39.2,
+      longitude: -76.4
+    },
+    zoom: 7,
+    options: {
+      minZoom: 7,
+      maxZoom: 22,
+    }
+  })
+
+  .constant('layerData', {
+
+    user_name: 'eczajk1',
+    cartodb_logo: false,
+
+    query: 'SELECT * FROM tl_2014_us_cd114 WHERE statefp = \'24\'',
+    interactivity: 'cartodb_id',
+    tile_style: '#tl_2014_us_cd114{ polygon-fill: #FF6600; polygon-opacity: 0.7; line-color: #FFF; line-width: 1; line-opacity: 1;}',
+
+    table_name: 'tl_2014_us_cd114'
+      //interaction: true
+  })
+  .service('cartodbLoader', function($q, $timeout){
+    var d = $q.defer();
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = '//cdn.rawgit.com/CartoDB/cartodb.js-bower/master/cartodb.js';
+
+    function checkIfCartoDbIsReady() {
+      $timeout(function(){
+        if(window.cartodb)
+          return d.resolve(window.cartodb);
+        checkIfCartoDbIsReady();
+      }, 500);
+    }
+
+    this.load = function(){
+      document.body.appendChild(script);
+      checkIfCartoDbIsReady();
+    };
+
+    this.promise = d.promise;
+    return this;
+
+  })
+  .controller('MapCtrl', function($scope, mapDefaults, uiGmapIsReady, layerData, cartodbLoader) {
+    var map;
+
+    $scope.defaults = mapDefaults;
+
+    uiGmapIsReady.promise(1).then(function(instances) {
+      instances.forEach(function(instance) {
+        map = layerData.map = instance.map;
+      });
+
+      cartodbLoader.load();
+      cartodbLoader.promise.then(function(){
+        // leverage the MapTypes directive
+        $scope.layer = new cartodb.geo.CartoDBLayerGMaps(layerData);
+      });
+
+    });
+
+  });
+</script>
+
+</html>
diff --git a/src/coffee/directives/api/models/parent/map-type-parent-model.coffee b/src/coffee/directives/api/models/parent/map-type-parent-model.coffee
@@ -23,16 +23,15 @@ angular.module('uiGmapgoogle-maps.directives.api.models.parent')
               @hideOverlay()
         , true
 
-        @scope.$watch 'options', (newValue, oldValue) =>
+        @scope.$watchCollection 'options', (newValue, oldValue) =>
           unless _.isEqual newValue, oldValue
             @refreshMapType()
-        , true
 
         if angular.isDefined @attrs.refresh
-          @scope.$watch('refresh', (newValue, oldValue) =>
+          @scope.$watch 'refresh', (newValue, oldValue) =>
             unless _.isEqual newValue, oldValue
               @refreshMapType()
-          , true)
+          , true
 
         @scope.$on '$destroy', =>
           @hideOverlay()