离子/角单张指令 - 放大/缩小按钮不起作用 [英] ionic/angular leaflet directive - zoom in/out buttons do not work
本文介绍了离子/角单张指令 - 放大/缩小按钮不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在单张地图/缩小按钮一些问题默认缩放。当我直接加载页面，但是当我改变一个州，其中小叶指令是按钮只是不工作，一切工作正常。在这里你去例子
<一个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 =http://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 =http://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>
这篇关于离子/角单张指令 - 放大/缩小按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
