离子/角度传单指令 - 放大/缩小按钮不起作用 [英] ionic/angular leaflet directive - zoom in/out buttons do not work

查看：36
本文介绍了离子/角度传单指令 - 放大/缩小按钮不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对传单地图上的默认放大/缩小按钮有一些问题.当我直接加载页面时一切正常，但是当我将一个状态更改为单张指令是按钮的状态时，一切正常.给你例子

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

代码:

HTML

<头><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>传单示例</title><身体><ion-nav-view></ion-nav-view><script type="text/ng-template" id="locations.html"><ion-view title="位置信息"><离子含量><ion-list can-swipe="true"><ion-item ng-click="locationOnClick(location)" class="item item-icon-left" ng-repeat="location in location"><i class="icon ion-location"></i><h2>{{location.name}}</h2></ion-item></ion-list></离子含量></ion-view><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><离子含量><leaflet height="480px"></leaflet></离子含量></ion-view><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>

JS

angular.module('app', ['离子','传单指令']).config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('位置', {网址:/位置"，templateUrl:"locations.html",控制器:'LocationsCtrl'}).state('位置', {url: "/location/:locationId",templateUrl: "location.html",控制器:'位置控制'});//如果以上状态都不匹配，则使用此作为后备$urlRouterProvider.otherwise('/locations');}).factory('locationService', function(){var_locations = [{编号:1，name: '样品位置',纬度:50，升:50}];返回 {获取全部:函数(){返回_位置；},getById:函数(id){return _locations.filter(function(loc){ return loc.id === id; })[0];}}}).controller('LocationsCtrl', function($scope, $location, locationService){$scope.locations = locationService.getAll();$scope.locationOnClick = 函数(位置){$location.path('/location/'+location.id);};}).controller('LocationCtrl', function($scope, $stateParams, locationService){$scope.location = locationService.getById($stateParams.locationId);})

解决方案

解决方案很简单.Ionic 正在吃掉"所有不是由框架创建的点击事件.对于传单地图的容器，需要添加属性data-tap-disabled="true"

<leaflet height="480px"></leaflet></离子含量>

I have some problems with default zoom in/out buttons on leaflet map. Everything works fine when I load page directly but when I change one state to state where leaflet directive is buttons just do not work. Here you go example

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

The 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>

JS

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

解决方案

The solution was simple. Ionic was "eating" all click events which was not created by a framework. For the container of leaflet map there was a need to add attribute data-tap-disabled="true"

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

这篇关于离子/角度传单指令 - 放大/缩小按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆