My custom directive focuses on developing an openlayers map application using Angular.
<div ng-app="app">
<map-container></map-container>
</div>
If you want to check out the working code, click here:
angular.module("app",[]);
angular.module("app").controller("MapContainerController", function ($scope) {
$scope.map = new ol.Map({});
});
angular.module("app").directive("mapContainer", function ($timeout) {
return {
"transclude": true,
"controller": "MapContainerController",
"link": function (scope) {
var map = scope.map;
map.setTarget(scope.targetElement || "map");
map.addLayer(new ol.layer.Tile({
source: new ol.source.OSM()
}));
map.setView(new ol.View({
zoom: 3,
center: [0, 0]
}));
},
"template": '<div id="map" class="map" ng-transclude></div>'
}
});
However, I want to utilize a scope parameter for the directive's map element name, as shown in this code snippet: demo version is here.
<div ng-app="app">
<map-container target-element="map"></map-container>
</div>
Unfortunately, this approach does not seem to work properly.
angular.module("app").directive("mapContainer", function ($timeout) {
return {
"transclude": true,
"scope": {
"targetElement": "@"
},
"controller": "MapContainerController",
"link": function (scope) {
var map = scope.map;
map.setTarget(scope.targetElement || "map");
map.addLayer(new ol.layer.Tile({
source: new ol.source.OSM()
}));
map.setView(new ol.View({
zoom: 3,
center: [0, 0]
}));
},
"template": '<div id="{{targetElement}}" class="map" ng-transclude></div>'
}
});
It seems like everything is set up correctly, but unfortunately, it still doesn't work. I'm having trouble pinpointing the issue.