formlyカスタムテンプレートを使用してチラシマップを初期化する方法は？

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

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

だからどうすればいいですか？最初に、controllerの代わりにlink関数を使用する必要があります。これは、リンク関数が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 
    }); 
    } 
}); 

ああ、私はあなたを伝えるのを忘れて二つのこと：あなたがIDとしてフィールドキーを渡したい場合

まず、あなたが行っているはずです

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

我々は最初の子を使用しているので、最後に、あなたは、そのdivにIDを配置する必要がありません。ただ、二重中括弧との定期的な角度テンプレートなどそれを選択するフィールド要素を囲んでいます。 :)

それをラップするために、私が見て、codepenに最小限の作業例を置く： https://codepen.io/sigriston/pen/OXxPPb