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

Question

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

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

这是我的小伙伴：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指令的属性绑定有很多错别字。