链接不适用于移动设备上的 ng-bind-html

Question

我正在使用 AngularJS.

使用 Ionic 构建移动应用程序

在某些视图中，我想绑定具有多个 link 的 HTML 代码，但不知为何它无法在移动设备上运行。

在浏览器中完美运行，但在移动设备上 link 无法点击。

我要绑定的文本：

"Some text <a href="http://www.test.com" target="_blank">http://www.test.com</a>"

我的代码在HTML:

<p ng-bind-html="testDetails"></p>

$sanitize 可用，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.

有什么想法吗？

Answer 1

看来我找到了解决方案。

具有 href 属性的简单 <a> 标签似乎无法在移动设备上使用 ng-bind-html.

相反，我使用了：

<a href="" onClick="window.open('http://www.test.com', '_system', 'location=yes')" 
target="_blank">http://www.test.com</a>

这工作得很好，但有必要通过明确信任危险值来绕过 ng-bind-html 中的 $sanitize（请参阅 AngularJS 文档）。 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

链接不适用于移动设备上的 ng-bind-html

Links not working with ng-bind-html on mobile

angularjs

cordova

ng-bind-html

ionic-framework