1

我正在尝试创建弹出 html 以进入leafletjs 标记弹出窗口。

我有以下部分：

 <div class="popup">
        <div class="pull-right">
          <a class="popup-info" ng-click="onInfoClicked()">
            <i class="fa fa-info-circle"></i>
           </a>
        </div>

        <div class="popup-title">
          {{title}}
        </div>

        <div class="popup-subtitle">
          {{subtitle}}
        </div>
    </div>

和以下指令：

app.directive('leafletPopup', function() {
  return {
    restrict: "A",
    templateUrl:  "app/partials/leaflet-popup.html",
    scope: {
      feature: '=',
      popupInfo: '&'
    },
    controller: function ($scope) {
      $scope.title = $scope.feature.properties.title;
      $scope.subtitle = $scope.feature.properties.description;

      $scope.onInfoClicked = function() {
         $scope.popupInfo({feature: feature});
      }
    }
  };
});

我有一个控制器，它提供了一个函数来为我要放置在地图上的每个标记生成 html：

function html(feature) {
  var el = angular.element('<div leaflet-popup="feature" popup-info="onPopupInfo(feature)"></div>');
  var compiled = $compile(el);
  var newScope = $scope.$new(true); // create new isolate scope
  newScope.feature = feature;  // inject feature into the scope
  newScope.onPopupInfo = function(feature) {  // inject function into scope
    // do something with the click
    showFeatureDetails(feature);
  }
  compiled(newScope);

  return el[0];
}

完美运行。很棒吧？

我在几个地方读到不建议手动创建自己的范围，因为您必须确保您也手动销毁它。

假设我的地图上有一堆标记，每个标记都有一个弹出窗口。我是否需要跟踪我在控制器中创建的所有新范围并对它们调用销毁？什么时候？仅当我的标记从地图上移除时？

我可以跳过 angular 并使用 jquery 构建整个 html 元素并将 onclick 附加到函数，但这也不漂亮。为什么要跳过角度？

似乎过于复杂，这可能意味着我正在努力做到这一点；）

4

0 回答 0