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

问题描述

我在单张地图/缩小按钮一些问题默认缩放。当我直接加载页面,但是当我改变一个州,其中小叶指令是按钮只是不工作,一切工作正常。在这里你去例子

<一个href=\"http://$c$cpen.io/anon/pen/JkyEg?editors=101\">http://$c$cpen.io/anon/pen/JkyEg?editors=101

在code:

HTML

 &LT; HTML NG-应用=应用程序&GT;
    &LT; HEAD&GT;
        &LT;间的charset =UTF-8/&GT;
        &LT; META NAME =视CONTENT =初始规模= 1,最大规模= 1,用户可扩展性=无,宽度=设备宽度/&GT;
        &LT;链接HREF =HTTP://$c$c.ionicframework.com/1.0.0-beta.11/css/ionic.min.css的rel =stylesheet属性/&GT;
        &LT;链接rel =stylesheet属性HREF =htt​​p://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css/&GT;
        &LT;标题&GT;小叶例如&LT; /标题&GT;
    &LT; /头&GT;
    &LT;身体GT;
        &LT;离子NAV-视图&gt;&LT; /离子NAV-视图&gt;        &LT;脚本类型=文/ NG-模板ID =locations.html&GT;
          &LT;离子视图标题=位置&GT;
            &LT;离子含量&GT;
                &LT;离子列表可以刷卡=真正的&GT;
                    &LT;离子项目NG点击=locationOnClick(位置)级=项项图标左NG重复=位置,位置&GT;
                        &LT; I类=图标离子位置&GT;&LT; / I&GT;
                        &LT; H2&GT; {{location.name}}&LT; / H&GT;
                    &LT; /离子项目&GT;
                &LT; /离子列表&gt;
            &LT; /离子含量&GT;
          &LT; /离子视图&gt;
        &LT; / SCRIPT&GT;
        &LT;脚本类型=文/ NG-模板ID =location.html&GT;
          &LT;离子视图标题={{location.name}}&GT;
            &LT;离子导航栏类=扎阳动画=NAV-标题幻灯片ios7&GT;
                &LT;一个UI的SREF =位置级=按钮图标左离子字形左边的按钮清晰&GT;地点和LT; / A&GT;
            &LT; /离子导航栏&GT;
            &LT;离子含量&GT;
                &LT;小叶HEIGHT =480像素&GT;&LT; /单张&GT;
            &LT; /离子含量&GT;
        &LT; /离子视图&gt;
        &LT; / SCRIPT&GT;
        &所述; SCRIPT SRC =htt​​p://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js&GT;&下; /脚本&GT;
        &所述; SCRIPT SRC =HTTP://$c$c.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js&GT;&下; /脚本&GT;
      &LT;脚本src=\"http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js\"></script>
    &LT; /身体GT;
&LT; / HTML&GT;

JS

  angular.module(应用,[
  离子,
  小叶,指令
])
  的.config(函数($ stateProvider,$ urlRouterProvider){
      $ stateProvider
          .STATE('位置',{
              URL:/位置,
              templateUrl:locations.html
              控制器:'LocationsCtrl
          })
          .STATE('位置',{
              网址:/位置/:locationId
              templateUrl:location.html
              控制器:'LocationCtrl
          });
      //如果没有上述状态相匹配,以此作为后备
      $ urlRouterProvider.otherwise('/地区');  })
.factory('locationService',函数(){
  变种_locations = [{
        ID:1,
        名称:试样的位置',
        纬度:50,
        LNG:50
      }];
  返回{
    GETALL:功能(){
      返回_locations;
    },
    getById:功能(ID){
      返回_locations.filter(功能(LOC){返回loc.id === ID;})[0];
    }
  }
})
.controller('LocationsCtrl',函数($范围,$位置,locationService){
  $ scope.locations = locationService.getAll();  $ scope.locationOnClick =功能(位置){
    $ location.path('/位置/'+ location.id);
  };
})
.controller('LocationCtrl',函数($范围,$ stateParams,locationService){
  $ scope.location = locationService.getById($ stateParams.locationId);
})


解决方案

解决的办法很简单。离子被吃这不是由框架创建所有点击事件。对于单张地图的容器,有必要增加属性数据抽头禁用=真正的

 &LT;离子含量数据抽头禁用=真正的&GT;
    &LT;小叶HEIGHT =480像素&GT;&LT; /单张&GT;
&LT; /离子含量&GT;

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>

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

07-13 17:31