Как инициализировать карту листовки с использованием специально настроенного шаблона?

Question

Я использую 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.

Answer 1

Это не работает, потому что контроллер получит вызов в точке, где нет элемента с соответствующим идентификатором в DOM, потому что Formly еще не применил шаблон.

Итак ... как это исправить? Во-первых, вы должны использовать функцию link вместо 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> 

Наконец, вам не нужно ставить ID в этом div, потому что мы используем первый ребенок из с помощью элемента поля, чтобы выбрать его. :)

Чтобы обернуть его, я поставил минимальный рабочий пример на codepen, посмотрите: https://codepen.io/sigriston/pen/OXxPPb