链接无法在移动设备上使用ng-bind-html
问题描述:
我正在使用AngularJS构建带有Ionic的移动应用程序。链接无法在移动设备上使用ng-bind-html
在一些视图中,我想绑定具有多个链接的HTML代码,但某种程度上它不适用于移动设备。
在浏览器中,它的工作原理非常完美,但是在移动设备上,链接无法点击。
文字,我想结合:
"Some text <a href="http://www.test.com" target="_blank">http://www.test.com</a>"
我的HTML代码:
<p ng-bind-html="testDetails"></p>
$消毒可用,ngSanitize已添加作为一个依赖
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
var appControllers = angular.module('starter.controllers', ['ngSanitize']); // Use for all controller of application.
任何理念?
答
看来我找到了解决方案。
不知何故简单<a>
带有href属性的标签似乎不适用于使用ng-bind-html的移动设备。
相反,我用:
<a href="" onClick="window.open('http://www.test.com', '_system', 'location=yes')"
target="_blank">http://www.test.com</a>
这仅仅完美,但(见AngularJS文档),有必要绕过$通过明确信任的危险值以ng绑定HTML的消毒。 https://docs.angularjs.org/api/ngSanitize/service/ $消毒
在控制器:
$scope.testDetails = '<a href="" onClick="window.open('http://www.test.com', '_system', 'location=yes')"
target="_blank">http://www.test.com</a>'
$scope.deliberatelyTrustDangerousSnippet = function(sniptext) {
return $sce.trustAsHtml(sniptext);
};
在HTML视图:
<p ng-bind-html='deliberatelyTrustDangerousSnippet(testDetails)'></p>
而且我找到了一个很好的过滤器来完成这项工作,如果接收到的数据用简单的<a href="">
属性: https://gist.github.com/rewonc/e53ad3a9d6ca704d402e