AngularJS custom directive ng-repeat, Cannot call method 'insertBefore' of null

StackOverflow https://stackoverflow.com/questions/20955356

Question

In my custom AngularJS google maps directive, I have map directive and marker directive, marker directive requires map directive.

The following is the simplified version of my problem, which I cannot use ng-repeat.

<!DOCTYPE html>
<html ng-app="testapp">
<head>
<script src="http://code.angularjs.org/1.2.5/angular.js"></script>
<script>
var testapp = angular.module('testapp', []);
testapp.directive('map', [
  function () {
    return {
      restrict: 'E',
      controller: function($scope) {
      },
      link: function (scope, element, attrs) {
        element.html("this will be a map");
      }
    };
  }
]);
testapp.directive('marker', [
  function () {
    return {
      require: '^map',
      restrict: 'E',
      link: function (scope, element, attrs, mapController) {
        console.log('position', attrs.position);
      }
    };
  }
]);
function MyCtrl($scope) {
  $scope.positions = [[39, -90],[38, -91]];
}
</script>
</head>

<body ng-controller="MyCtrl">
  <map zoom="12" center="[39, -90]">
    <marker ng-repeat='p in positions' position="{{ p }}"></marker>
  </map>
</body>
</html>

This is demoed here, http://plnkr.co/edit/IN237QwEdNkdzpDaX70z?p=preview And the error is, 

TypeError: Cannot call method 'insertBefore' of null
    at http://code.angularjs.org/1.2.5/angular.js:2760:14
    at forEach (http://code.angularjs.org/1.2.5/angular.js:303:18)
    at forEach.after (http://code.angularjs.org/1.2.5/angular.js:2759:5)
    at Object.JQLite.(anonymous function) [as after] (http://code.angularjs.org/1.2.5/angular.js:2825:17)
    at Object.enter (http://code.angularjs.org/1.2.5/angular.js:3906:17)
    at http://code.angularjs.org/1.2.5/angular.js:19048:26
    at publicLinkFn (http://code.angularjs.org/1.2.5/angular.js:5483:29)
    at boundTranscludeFn (http://code.angularjs.org/1.2.5/angular.js:5595:21)
    at controllersBoundTransclude (http://code.angularjs.org/1.2.5/angular.js:6189:18)
    at ngRepeatAction (http://code.angularjs.org/1.2.5/angular.js:19046:15)

This works well marker directive alone.
http://plnkr.co/edit/4i8Rtvk3Qu1U8JRLRAal?p=preview

I think the problem appears when the parent directive has DOM manipulated. However, since we are using directive, it must manipulate dom.

Any help would be appreciated.

Was it helpful?

Solution

The problem is that you are replacing the content of map (marker) with 

element.html("this will be a map");

If instead you try to append it will work without problem.

element.append("this will be a map");

Here is a JSBin

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top