out boutons ne fonctionnent pas

J'ai des problèmes avec les boutons de zoom in / out par défaut sur la carte de la brochure. Tout fonctionne bien lorsque je charge ma page directement mais lorsque je modifie un état à l'état où la directive sur les panneaux est juste, ne fonctionnent pas. Ici, vous allez un exemple

Le code:

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); })

La solution était simple. Ionic a été "manger" tous les événements de clic qui n'a pas été créé par un cadre. Pour le conteneur de la carte du dépliant, il fallait ajouter des data-tap-disabled="true" attribut data-tap-disabled="true"

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

Il semble que ionic ait un bug sur le gestionnaire d'événements tactiles. Cependant, un de mes collègues a eu une solution de contournement jusqu'à ce qu'il soit réparé.

Fondamentalement, utilisez sa version de ionic.bundle.js ( https://rawgit.com/cachiconato/ionic/angular-leaflet-control/release/js/ionic.bundle.js ) et ajoutez 'data-do-not-set -coordinates = "true" 'à chaque étiquette possible en lien avec la carte.

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

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