離子/角度傳單指令 - 放大/縮小按鈕不起作用

我在傳單地圖上的默認放大/縮小按鈕有一些問題。一切工作正常，當我直接加載頁面，但當我改變一個狀態，以說明leaflet指令是按鈕只是不工作。在這裏你去例如離子/角度傳單指令 - 放大/縮小按鈕不起作用

http://codepen.io/anon/pen/JkyEg?editors=101

代碼：

HTML

<html ng-app="app"> 
    <head> 
     <meta charset="utf-8"/> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/> 
     <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css" rel="stylesheet"/> 
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
     <title>Leaflet example</title> 
    </head> 
    <body> 
     <ion-nav-view></ion-nav-view> 

     <script type="text/ng-template" id="locations.html"> 
      <ion-view title="Locations"> 
      <ion-content> 
       <ion-list can-swipe="true"> 
        <ion-item ng-click="locationOnClick(location)" class="item item-icon-left" ng-repeat="location in locations"> 
         <i class="icon ion-location"></i> 
         <h2>{{location.name}}</h2> 
        </ion-item> 
       </ion-list> 
      </ion-content> 
      </ion-view> 
     </script> 
     <script type="text/ng-template" id="location.html"> 
      <ion-view title="{{location.name}}"> 
      <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7"> 
       <a ui-sref="locations" class="button icon-left ion-chevron-left button-clear ">Locations</a> 
      </ion-nav-bar> 
      <ion-content> 
       <leaflet height="480px"></leaflet> 
      </ion-content> 
     </ion-view> 
     </script> 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
     <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script> 
     <script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script> 
    </body>                 
</html>

angular.module('app', [ 
    'ionic', 
    'leaflet-directive' 
]) 
    .config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('locations', { 
       url: "/locations", 
       templateUrl:"locations.html", 
       controller: 'LocationsCtrl' 
      }) 
      .state('location', { 
       url: "/location/:locationId", 
       templateUrl: "location.html", 
       controller: 'LocationCtrl' 
      }); 


     // if none of the above states are matched, use this as the fallback 
     $urlRouterProvider.otherwise('/locations'); 

    }) 
.factory('locationService', function(){ 
    var _locations = [{ 
     id: 1, 
     name: 'Sample location', 
     lat: 50, 
     lng: 50 
     }]; 
    return { 
    getAll: function(){ 
     return _locations; 
    }, 
    getById: function(id){ 
     return _locations.filter(function(loc){ return loc.id === id; })[0]; 
    } 
    } 
}) 
.controller('LocationsCtrl', function($scope, $location, locationService){ 
    $scope.locations = locationService.getAll(); 

    $scope.locationOnClick = function(location){ 
    $location.path('/location/'+location.id); 
    }; 
}) 
.controller('LocationCtrl', function($scope, $stateParams, locationService){ 
    $scope.location = locationService.getById($stateParams.locationId); 
})

來源

2014-09-04 tsubik

該溶液很簡單。離子是「吃」所有不是由框架創建的點擊事件。對於小冊子地圖的容器需要添加屬性data-tap-disabled="true"

<ion-content data-tap-disabled="true"> 
    <leaflet height="480px"></leaflet> 
</ion-content>

來源

2014-09-16 19:51:35 tsubik

謝謝@tsubik它適用於我。 – 2016-10-03 09:07:56

好像離子有一個bug觸摸事件處理程序。但是，我的一位同事想出了一個解決方法，直到它得到修復。

基本上，使用他的版本的ionic.bundle.js（https://rawgit.com/cachiconato/ionic/angular-leaflet-control/release/js/ionic.bundle.js）並添加'data-do-not-set-coordinates =「true」'給每個可能的鏈接到地圖的標籤。

http://codepen.io/anon/pen/sHpoy?editors=101

<h2 data-do-not-set-coordinates="true">{{location.name}}</h2>

來源

2014-09-16 01:40:00

是的解決方案的工作原理，但我發現更簡單的一個。 – tsubik 2014-09-16 19:46:23

是的，來這裏說同樣的事情。很高興你發現，不得不深入源代碼比我看到評論說這... =/ – 2014-09-23 00:58:09

離子/角度傳單指令 - 放大/縮小按鈕不起作用

回答

相關問題