Jak zainicjować mapę ulotek za pomocą formalnego niestandardowego szablonu? - javascript, angularjs, ulotka, kątowe

Korzystam z Angular-Formly, aby utworzyć formularz, w którym wpisujesz adres, który zwraca mapę z tego lokalnego. Utworzyłem niestandardowy szablon z następującymi elementami:

<script type="text/ng-template" id="leaflet-map-template.html"> <div id="[options.key]"></div> </script>

I ustaw typ na angular.module z innymi modułami:

var app = angular.module("formlyExample", [
"ngAnimate",
"ngSanitize",
"ngTouch",
"formly",
"formlyBootstrap",
"ui.bootstrap"
], function config(formlyConfigProvider) {
// set custom template here
formlyConfigProvider.setType({
name: "leaflet-map",
templateUrl: "leaflet-map-template.html"
});
});

Ale na polu nie wiem, jak zainicjować mapę ulotki. To część mojej tablicy pól:

vm.formFields = [
//other fields come here
//leaflet map template
{
key: "mymap",
type: "leaflet-map",
templateOptions: {
label: "Leaflet Map"
},
controller: /* @ngInject */ function($scope) {
var initialCoordinates = [-23.0895164, -47.2187371];
// initialize map with initial coordinates
var map = L.map($scope.options.key, {
center: initialCoordinates,
zoom: 14,
zoomControl: false
});
}
}];

--EDYTOWAĆ-- Błąd, który mi daje to: Map container not found, ponieważ nie można znaleźć div.

Odpowiedzi:

3 dla odpowiedzi № 1

To nie działa, ponieważ kontroler zostanie wywołany w punkcie, w którym nie ma elementu o poprawnym identyfikatorze w DOM, ponieważ Formly jeszcze nie zastosował szablonu.

Więc ... jak to naprawić? Po pierwsze, powinieneś użyć link funkcja zamiast controller, ponieważ funkcje łączenia są domyślnym miejscem do manipulacji DOM w Angular.

Ponadto, aby uniknąć konieczności udostępniania funkcji łączenia za każdym razem, gdy tworzysz pole mapy, umieść funkcję połączenia w definicji typu, a nie w definicji pola.

Wreszcie, funkcje łączenia otrzymują element zamykający jako drugi argument, więc wszystko, co musisz zrobić, aby uzyskać div jest po prostu uzyskać pierwsze dziecko elementu zamykającego.

Kod będzie wyglądał następująco:

formlyConfigProvider.setType({
name: "leafletmap",
templateUrl: "leaflet-map-template.html",
link: function(scope, el) {
// initialize map with initial coordinates
var initialCoordinates = [-23.0895164, -47.2187371];
// get first child of the enclosing element - the <div>!
var mapDiv = el.children()[0];
var map = L.map(mapDiv, {
center: initialCoordinates,
zoom: 14,
zoomControl: false
});
}
});

Dwie rzeczy, o których zapomniałem ci powiedzieć:

Po pierwsze, jeśli chcesz przekazać klucz pola jako identyfikator, powinieneś zrobić tak jak zwykły szablon kątowy z podwójnymi nawiasami klamrowymi:

<script type="text/ng-template" id="leaflet-map-template.html">
<div id="{{options.key}}"></div>
</script>

Wreszcie, nie musisz w tym umieszczać identyfikatora div, ponieważ używamy pierwszego elementu potomnego otaczającego elementu pola, aby go wybrać. :)

Podsumowując, umieściłem minimalny przykładowy przykład na codepen, spójrz: https://codepen.io/sigriston/pen/OXxPPb

---