Ссылки не работают с ng-bind-html на мобильном телефоне

Question

Я создаю мобильное приложение с Ionic, используя AngularJS.

В некоторых представлениях я хотел бы связать 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

Похоже, я нашел решение.

Как-то просто <a> теги с атрибутом href не работают на мобильных устройствах с помощью ng-bind-html.

Вместо этого я использовал:

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

Это просто отлично работает, но необходимо было обойти $ sanitize в ng-bind-html, явно доверяя опасному значению (см. Документацию 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