Question

我正在通过开发map指令来学习angularjs。最外层的指令是myMap，然后是myCircle，myMarker等....是子指令。这时，我只有myMap和myCirle指令。如果我不使用ng-repeat，地图和圆圈工作正常。一旦我使用ng-repeat，angularjs就会抛出异常

TypeError：无法读取属性＆＃39; insertBefore＆＃39;在https://code.angularjs.org/1.2.21/angular.js:3012:13 ... 处为null 我一开始画地图。我花了很多时间，但仍然不知道如何解决它。任何帮助将不胜感激。

这是我的傻瓜：http://plnkr.co/edit/LI7lh28OAhh59HeuL7O1?p=preview

 app.directive('myMap', function () {
        return {
          restrict: 'E',
          replace: true,
          transclude: true,
          template: "<div ng-transclude id='mapCanvas' ></div>",
          scope: {
              center: '=',
              zoom: '='
          },
          controller: function ($scope) {
            console.log('map directive: controller...')
            this.drawCircle = function (data) {

               var circle = new google.maps.Circle({
                            map: $scope.map,
                            center: new google.maps.LatLng(data.center.latitude, data.center.longitude),
                            radius: data.radius,
                            strokeColor: data.strokeColor,
                            strokeOpacity: data.strokeOpacity,
                            strokeWeight: data.strokeWeight,
                            fillColor: data.fillColor,
                            fillOpacity: data.fillOpacity
                        });

              return circle;

            };
          },
          link: function (scope, element, attrs) {
              var mapOptions = {
                        center: new google.maps.LatLng(scope.center.latitude, scope.center.longitude),
                        zoom: scope.zoom
                    };
              // comment this line out will make the directives work without problem.
              scope.map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

              console.log("Map directive:Link: initialize the map ..." + JSON.stringify(scope.center));
          }
        }
    });

    app.directive('myCircle', function ($timeout) {
        return {
          restrict: 'E',
          replace: true,
          scope: {},
          require:'^myMap',
          link: function (scope, element, attrs, ctrl) {
              console.log("circle directive:Link..." );

           var data = {
                        center:{latitude: attrs.lat, longitude:attrs.lng},
                        radius: parseFloat(attrs.radius),
                        strokeColor: attrs.strokeColor,
                        strokeOpacity: attrs.strokeOpacity,
                        strokeWeight: attrs.strokeWeight,
                        fillColor: attrs.fillColor,
                        fillOpacity: attrs.fillOpacity
                    };

            $timeout( function(){
              console.debug('callling the map.drawCircle...')
              ctrl.drawCircle(data)
            }, 1000);
          }
        }
    });

Answer 1

这是因为在使用此语句创建地图时：

 scope.map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

mapCanvas元素中的内容将被移除并替换与谷歌地图小部件。

然后当ng-repeat尝试填充map.circles中的元素时，它无法找到应该追加这些元素的原始元素。

要解决此问题，您可以将myMap指令的模板更改为类似的内容，以防止替换原始元素。

template: "<div><div id='mapCanvas'></div><div ng-transclude></div></div>",

示例Plunker： http://plnkr.co/edit/A0yYyoB5LCfTM0ixVcMy?p=preview

PS。 my-circle指令的属性绑定中存在很多拼写错误。

嵌套指令和ng-repeat异常TypeError：无法读取null的属性“insertBefore”

1 个答案: