Angular Leaflet Search control event

问题

I have an AngularJS application and I'm currently trying to access the "search_expanded" event of Leaflet Search control but having no luck.

Here's my code:

angular.module('myApp', [ 'leaflet-directive' ])
       .controller('ShowMapCtrl', ["$scope", "leafletData", function ($scope, leafletData) {
       // some code
            leafletData.getMap().then(function(map) {
                       map.on('search_expanded', function(e){
                            alert("search control expannded"); 
                       });
                   });

回答1:

The search_expanded event, and all the other events supported by L.Control.Search are fired on the actual control instance not on the map instance as you can see in the following example:

var controlSearch = new L.Control.Search({
    layer: new L.LayerGroup()
}).on('search_expanded', function () {
    console.log('search_expanded!')
}).addTo(map);

http://plnkr.co/edit/njeXYb4PfbaG3hppcgmO?p=preview

回答2:

First off I would try to throw some exception handling in there:

leafletData.getMap().then(function(map) {
    map.on('search_expanded', function(e){
        alert("search control expannded"); 
    }, function(reason) {
        alert('Failed: ' + reason);
});

Also, instead of alert, I prefer to use console.log() especially with Angular applications.

leafletData.getMap().then(function(map) {
    map.on('search_expanded', function(e){
        console.log("search control expannded"); 
    }, function(reason) {
        console.log('Failed: ' + reason);
});

回答3:

I came up with a sloppy workaround since the directive won't allow me to catch the search control events.

var expanded = false;

$scope.$on('leafletDirectiveMap.layeradd', function(){

    $('input.search-input').focus(function(){

        expanded = !expanded;

        if(expanded)
        {
            console.log("search control expanded");
        }

    });
});

来源：https://stackoverflow.com/questions/35377842/angular-leaflet-search-control-event