フォーマルなカスタムテンプレートを使用してチラシマップを初期化する方法 - 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
});
}
}];

-編集- それが私に与えるエラーは次のとおりです。 Map container not found、それが見つからないので div.

回答：

回答№1の場合は3

Formlyはまだテンプレートを適用していないため、DOMに適切なIDを持つ要素がないポイントでコントローラーが呼び出されるため、これは機能しません。

だから...それを修正する方法は？まず、使用する必要があります link の代わりに機能 controller、リンク関数はAngularでDOM操作を行うためのデフォルトの場所であるためです。

また、マップフィールドをインスタンス化するたびにリンク関数を提供する必要がないように、リンク関数をフィールド定義ではなくタイプ定義に配置します。

最後に、リンク関数は2番目の引数として囲んでいる要素を受け取るので、 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
});
}
});

ああ、私があなたに言うのを忘れた2つのこと：

まず、フィールドキーをIDとして渡したい場合は、通常の角度テンプレートと同じように、二重中括弧を使用して行う必要があります。

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

最後に、その中にIDを入れる必要はありません div、これは、囲んでいるfield要素の最初の子を使用して選択しているためです。:)

それをまとめるために、私は最小限の実用的な例をcodepenに載せました、見てください： https://codepen.io/sigriston/pen/OXxPPb

---