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.
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");