공식 맞춤형 템플릿을 사용하여 리플릿 맵을 초기화하는 방법은 무엇입니까?

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

그러나 현장에서 나는를 초기화하는 방법을 모른다 전단지. 그것은 div을 찾을 수 없기 때문에, Map container not found :

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-- 오류가 날 것입니다 제공 : 이것은 내 필드의 배열의 일부입니다.

Answer 1

형식적으로 아직 서식 파일을 적용하지 않았기 때문에 DOM에 적절한 ID가있는 요소가없는 지점에서 컨트롤러가 호출되기 때문에이 방법은 작동하지 않습니다.

그래서 ... 어떻게 고칠 수 있습니까? 먼저, controller 대신 link 함수를 사용해야합니다. 링크 함수가 Angular에서 DOM 조작을 수행하는 기본 위치이기 때문입니다.

또한 맵 필드를 인스턴스화 할 때마다 링크 기능을 제공하지 않아도되도록 필드 정의가 아닌 유형 정의에 링크 기능을 넣으십시오.

마지막으로 링크 함수는 두 번째 인수로 둘러싸인 요소를받습니다. 따라서 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 
    }); 
    } 
}); 

아, 깜빡 두 가지가 당신에게 :

이

첫째, 당신이 ID로 필드 키를 통과하기를 원한다면, 당신은 했어야 다만 이중 중괄호와 정기적 각 템플릿, 같은 : 우리의 첫 번째 자식을 사용하고 있기 때문에 마지막으로

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

, 당신은 그 div에 ID를 넣어 필요가 없습니다 필드 요소를 감싸서 선택하십시오. https://codepen.io/sigriston/pen/OXxPPb

: :)

는 타고 나는 codepen에 최소한의 작업 예제를 올려보고를 마무리하려면