Link Angular 中的 Openlayers 指令标记消息不起作用
Link in Angular Openlayers Directive marker message not working
我使用 angular openlayers 指令制作了一个简单的移动应用程序,我有我的地图和我需要的标记,但是在标记消息中显示的 html 中有一个 link 这会将您带到另一个无法正常工作的页面。
Angular Openlayers 指令有问题吗?还是我做错了什么?
这可能与我在 Apache Cordova 中为 Visual Studio 2015 制作离子应用程序这一事实有关?我会展示代码,但它几乎与我在这里展示的示例完全一样,问题是,我在弹出窗口 windows 中输入的 link 不会在点击时执行任何操作。
编辑(再次):好的,现在我有一些例子可以展示,我基于这个 http://embed.plnkr.co/oHzLdlUNiEnHZKYA6qdK/, and shows exactly the problem i'm having with the links inside the marker's windows, basically the link doesn't work, here it is: http://codepen.io/Orion390/pen/rrrQxm
$scope.markers.push({
lat: Math.random() * 90 - 40,
lon: Math.random() * 180 - 90,
//message: $scope.markers.length +1
message: "<a href='http://whosebug.com/' target='_self'> Lets post the question!! </a>"
});
在其信息窗口中放置一个带有 link 的标记,点击时不执行任何操作
更新:这个确实有效 http://codepen.io/Orion390/pen/RGGZOE,我刚在 ng-init 中添加了一个标记,例如:
<body ng-controller="MainCtrl" ng-init="addMarker()" >
没有真正解决问题,之后添加的标记仍然不起作用,但可能与标记 windows 渲染在图层后面,无法获取点击事件有关?
这是您的解决方法:
<ol-marker ng-repeat="marker in markers" ng-click="go()" ol-marker-properties="marker" >
<a data-tap-disabled='true' href='http://whosebug.com/' target='_self'> Lets post the question!! </a>
</ol-marker>
因此您需要添加 data-tap-disabled='true'
所以您的代码。但不幸的是,这将在 bind-html 期间被删除。因此,您将需要禁用 sce
限制或使用 transclude 并将您想要的 html 包含在 ol-marker
中。另一种选择是您可能会在 <openlayers>
的更改中将其提高。
上的 Ionic 文档
如果您需要更新的代码笔,请告诉我。
在 ionic 中破解它的代码是:
function tapClickGateKeeper(e) {
//console.log('click ' + Date.now() + ' isIonicTap: ' + (e.isIonicTap ? true : false));
if (e.target.type == 'submit' && e.detail === 0) {
// do not prevent click if it came from an "Enter" or "Go" keypress submit
return null;
}
// do not allow through any click events that were not created by ionic.tap
if ((ionic.scroll.isScrolling && ionic.tap.containsOrIsTextInput(e.target)) ||
(!e.isIonicTap && !ionic.tap.requiresNativeClick(e.target))) {
//console.log('clickPrevent', e.target.tagName);
e.stopPropagation();
if (!ionic.tap.isLabelWithTextInput(e.target)) {
// labels clicks from native should not preventDefault othersize keyboard will not show on input focus
e.preventDefault();
}
return false;
}
}
我使用 angular openlayers 指令制作了一个简单的移动应用程序,我有我的地图和我需要的标记,但是在标记消息中显示的 html 中有一个 link 这会将您带到另一个无法正常工作的页面。
Angular Openlayers 指令有问题吗?还是我做错了什么?
这可能与我在 Apache Cordova 中为 Visual Studio 2015 制作离子应用程序这一事实有关?我会展示代码,但它几乎与我在这里展示的示例完全一样,问题是,我在弹出窗口 windows 中输入的 link 不会在点击时执行任何操作。
编辑(再次):好的,现在我有一些例子可以展示,我基于这个 http://embed.plnkr.co/oHzLdlUNiEnHZKYA6qdK/, and shows exactly the problem i'm having with the links inside the marker's windows, basically the link doesn't work, here it is: http://codepen.io/Orion390/pen/rrrQxm
$scope.markers.push({
lat: Math.random() * 90 - 40,
lon: Math.random() * 180 - 90,
//message: $scope.markers.length +1
message: "<a href='http://whosebug.com/' target='_self'> Lets post the question!! </a>"
});
在其信息窗口中放置一个带有 link 的标记,点击时不执行任何操作
更新:这个确实有效 http://codepen.io/Orion390/pen/RGGZOE,我刚在 ng-init 中添加了一个标记,例如:
<body ng-controller="MainCtrl" ng-init="addMarker()" >
没有真正解决问题,之后添加的标记仍然不起作用,但可能与标记 windows 渲染在图层后面,无法获取点击事件有关?
这是您的解决方法:
<ol-marker ng-repeat="marker in markers" ng-click="go()" ol-marker-properties="marker" >
<a data-tap-disabled='true' href='http://whosebug.com/' target='_self'> Lets post the question!! </a>
</ol-marker>
因此您需要添加 data-tap-disabled='true'
所以您的代码。但不幸的是,这将在 bind-html 期间被删除。因此,您将需要禁用 sce
限制或使用 transclude 并将您想要的 html 包含在 ol-marker
中。另一种选择是您可能会在 <openlayers>
的更改中将其提高。
如果您需要更新的代码笔,请告诉我。
在 ionic 中破解它的代码是:
function tapClickGateKeeper(e) {
//console.log('click ' + Date.now() + ' isIonicTap: ' + (e.isIonicTap ? true : false));
if (e.target.type == 'submit' && e.detail === 0) {
// do not prevent click if it came from an "Enter" or "Go" keypress submit
return null;
}
// do not allow through any click events that were not created by ionic.tap
if ((ionic.scroll.isScrolling && ionic.tap.containsOrIsTextInput(e.target)) ||
(!e.isIonicTap && !ionic.tap.requiresNativeClick(e.target))) {
//console.log('clickPrevent', e.target.tagName);
e.stopPropagation();
if (!ionic.tap.isLabelWithTextInput(e.target)) {
// labels clicks from native should not preventDefault othersize keyboard will not show on input focus
e.preventDefault();
}
return false;
}
}