I have a custom JavaScript plugin that is integrated within a directive and utilized in an Angular manner.
Snippet of the directive,
export default function () {
'use strict';
return {
restrict: 'E',
scope: {
map: '=',
options: '='
},
replace: true,
template: '<div id="map" class="leaflet-map"></div>'
link: function(scope, element, attrs) {
//Here lies the native JavaScript code that
//injects SVG inside the specified template
scope.map = new MP.Map(scope.options);
}
};
}
HTML
<mp-map options="opt" map="mapOpt"></mp-map>
Desired HTML Structure
<div id="map"><svg>.. content of the map .. </svg></div>
Firstly, I am attempting to access mapOpt (i.e. instance of Mp.Map or binding with the native JavaScript class in the directive's link method) on init, but failing to obtain the instance of MP.Map in the Angular controller. By using $timeout (without any asynchronous data), it works subsequently.
Secondly, I have crafted a unit test for the directive to confirm that <mp-map> gets replaced by the template of the directive. However, an error "Map container not found" (the error generated by the native code) arises during this process.
It seems like there might be an issue with how I initially defined the directive.
Calling out to fellow Angular developers for assistance.
Your prompt help would be greatly valued.
EDIT: Few excerpts from the MP class (Custom class)
FP.Map = L.Class.extend({
options: {
container: 'map',
.....
},
....
// Map options
this.options.map = L.extend(this.options.map, options.map);
this.map = L.map(this.container, this.options.map);
})