Як ініціалізувати карту листівки, використовуючи формально спеціальний шаблон? - javascript, angularjs, листівка, кутовий формі

Я використовую Angular-Formly для створення форми, де ви вводите адресу, і вона повертає карту з цього локалу. Я створив власний шаблон із наступним:

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

І встановіть тип на angular.module з іншими модулями:

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

Але в полі я не знаю, як ініціалізувати листівку-карту. Це частина мого масиву полів:

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
});
}
}];

- EDIT-- Помилка, яку він мені видає: Map container not found, тому що він не може знайти div.

Відповіді:

3 для відповіді № 1

Це не працює, оскільки контролер буде викликаний у точці, де в DOM немає елемента з належним ідентифікатором, оскільки Formly ще не застосував шаблон.

Отже ... як це виправити? По-перше, ви повинні використовувати a link функція замість a controller, оскільки функції зв’язку є місцем за замовчуванням для виконання маніпуляцій DOM в Angular.

Крім того, щоб уникнути необхідності надавати функцію зв’язку кожного разу, коли ви створюєте екземпляр поля карти, додайте функцію зв’язку у визначення типу, а не у визначення поля.

Нарешті, функції зв’язку отримують заключуючий елемент як другий аргумент, тому все, що вам потрібно зробити, щоб отримати div це просто отримати першу дочірню частину, що включає елемент.

Код виглядатиме так:

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
});
}
});

О, дві речі я забув вам сказати:

По-перше, якщо ви хотіли передати ключ поля як ідентифікатор, вам слід було зробити так само, як звичайний кутовий шаблон, із подвійними фігурними дужками:

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

Нарешті, вам не потрібно вказувати посвідчення особи div, тому що ми використовуємо першу дочірню частину елемента поля для його виділення. :)

Щоб завершити це, я розмістив мінімальний робочий приклад на codepen, подивись: https://codepen.io/sigriston/pen/OXxPPb

---