未知提供者使用leafletView在Angular Leaflet Directive中显示弹出窗口

Question

I am trying to display a pop up window in an angular leaflet map using prune cluster. However, I am getting an error that leafletView is an unknown provider. I have followed the examples on this page but i have been unsuccessful - https://github.com/SINTEF-9012/PruneCluster . Here is my code:

angular.module('bizvizmap').controller('controller', [
    '$scope', '$http', '$filter', 'leafletData', 'leafletView',
    function ($scope, $http, $filter, leafletData, leafletView){
    $scope.center = {
        lat: 39.5500507,
        lng: -105.7820674,
        zoom: 4
            },
    $scope.defaults = {
        scrollWheelZoom: true
            },
    $scope.events = {
            map: {
            enable: ['zoomstart', 'drag', 'click', 'mousemove'],
            logic: 'emit'
            }
            },
    $scope.layers = {
            baselayers: {
            osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz'
                    }
                },
            markers:{}
    },
    $scope.map = null;
    leafletData.getMap("bizvizmap").then(function(map){
        $scope.map = map;
    });
    function renderMarkers(data, map){
        var markerLayer = new PruneClusterForLeaflet();
        for (var i=0; i < data.length; i++){
            var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
            popup: "Marker";
            markerLayer.RegisterMarker(marker);
        }
        map.addLayer(markerLayer);
        markerLayer.ProcessView();
    }
//Display PopUp
    leafletView.PrepareLeafletMarker = function (marker, data) {
        if (marker.getPopup()) {
            marker.setPopupContent(data.company);
        } else {
            marker.bindPopup(data.company);
        }
    };
    $scope.geojson = {};
    $http.get('data/bizvizmap.geojson').success(function (data){
            $scope.data = data;
            // Render clustered markers
            renderMarkers(data.features, $scope.map);
        });
    // Filtering markers
    $scope.search = {
        'NAICS':'',
        'SIC':''
    };
        $scope.$watch('search', function(newVal, oldVal){
            if(!angular.equals(newVal, oldVal)) {
                var geojson = angular.copy($scope.data);
                angular.forEach(newVal, function(value, property){
                    console.log(property + ':' + value);
                    if (value !== ''){
                        geojson = $filter('filter')(geojson, property, value);
                    }
                });
        function removeMarkers(data, map){
        map.removeLayer(markerLayer);
        markerLayer.ProcessView();
    }
                //map.removeLayer(markerLayer);
                // Remove all the markers
               $scope.geojson.data = geojson;
               //renderMarkers(data.features, $scope.map);
            } else {
                $scope.geojson.data = $scope.data;
            }
        }, true);
    }
]);

Answer 1

I think that the object that have to be modified in order to add popups is the actual prunecluster were you are registering the markers.

var markerLayer = new PruneClusterForLeaflet();

markerLayer.PrepareLeafletMarker = function (marker, data) {
    if (marker.getPopup()) {
        marker.setPopupContent(data.company);
    } else {
        marker.bindPopup(data.company);
    }
};