2016-02-13 53 views
1

我有一個AngularJS應用程序,我目前正試圖訪問Leaflet Search控件的「search_expanded」事件,但沒有運氣。角度單張搜索控制事件

這裏是我的代碼:

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"); 
         }); 
        }); 
+0

嘗試做..'$範圍在$( 'search_expanded',執行console.log);' – Minato

+0

這是我的第一種方法,但它沒有工作 – schizoskmrkxx

+0

'$ rootScope在$( 'search_expanded' ,console.log);'第二種方法? – Minato

回答

1

search_expanded事件,並全部由L.Control.Search支持的其他事件的實際控制實例觸發未在地圖上的實例,你可以在下面的例子中看到:

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

+0

是的,但'angular-leaflet-directive'有不同的[實現搜索控制]的方式(http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/controls/搜索示例),它禁止從事傳統捕捉事件的方式 – schizoskmrkxx

+0

我知道並且很抱歉地說,afaik沒有辦法從'leafletControlHelpers'抓取搜索控件實例,因爲這些控件沒有存儲在公共可用屬性中。所以你唯一的解決方案就是在你的控制器中抓取地圖實例並手動添加控件。我知道這很糟糕。使用這個指令具有嚴重的缺點,例如它膨脹並留下一半的功能,當你用自己的指令運行普通的Leaflet並將所有的邏輯放在你的控制器或服務中時,你可能會得到一半的功能。祝你好運。 – iH8

+0

我也一直在尋找幫手。難怪我找不到任何可以用來舉辦活動的東西。儘管我找到了解決方法。這是一種馬虎,但它的作品。 – schizoskmrkxx

0

首先,我會嘗試拋出一些異常處理中有:

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

此外,而不是警報,我更喜歡使用的console.log()特別是在Angular應用程序中。

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

謝謝,但這不是承諾有問題。它每次都成功地返回諾言。問題在於,我不知道如何在觸發時捕獲「search_expanded」事件。 – schizoskmrkxx

0

我想出了一個馬虎的解決方法,因爲該指令不會讓我抓住搜索控制事件。

var expanded = false; 

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

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

     expanded = !expanded; 

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

    }); 
});