Question

我正在使用AngularJS使用Ionic构建移动应用程序。

在某些视图中，我想绑定具有多个链接的HTML代码，但不知何故它不能在移动设备上工作。

在浏览器中它可以很好地工作，但在移动设备上无法点击链接。

我想绑定的文字：

"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/ $ sanitize

在控制器中：

$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

1 个答案: