javascript - 如何使用正式自定义模板初始化传单 map ？

Question

我正在使用 Angular-Formly 创建一个表单，您可以在其中输入一个地址，它会返回一个本地 map 。我使用以下内容创建了一个自定义模板:

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

但在现场我不知道如何初始化传单 map 。这是我的字段数组的一部分:

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 .

Answer 1

这不起作用，因为在 DOM 中没有具有正确 ID 的元素时将调用 Controller ，因为 Formly 尚未应用模板。

那么……如何解决呢？首先，您应该使用 link 函数而不是 controller，因为链接函数是 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 传递，您应该像使用双花括号的常规 Angular 模板一样完成:

<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