angularjs 输出 html 可点击元素而不是 html 作为字符串

Question

我正在使用过滤器从内容中转换任何 URL 或电子邮件 ID。但它呈现为字符串而不是可点击的 HTML 元素。

过滤JS

angular.module('myApp.filters', []).filter('parseUrl', function() {
    var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim
    var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim

    return function(text) {

        if (text.match(urls)) {
            text = text.replace(urls, "<a href=\"\" target=\"_blank\"></a>")
        }
        if (text.match(emails)) {
            text = text.replace(emails, "<a href=\"mailto:\"></a>")
        }

        return text
    }
});

上面的代码输出了平面文本和不可点击的 HTML 元素。

Fiddle

Answer 1

您的过滤器应该使用严格上下文转义 $sce 到 return 可信 HTML

angular.module('myApp.filters', []).filter('parseUrl', function ($sce) {
     var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim
     var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim

     return function (text) {
         if (text.match(urls)) {
             text = text.replace(urls, "<a ng-href=\"\" target=\"_blank\"></a>");
         }

         if (text.match(emails)) {
             text = text.replace(emails, "<a ng-href=\"mailto:\"></a>");
         }

         return $sce.trustAsHtml(text);
     }
 });

更新

您似乎使用的是 Angular 的旧版本（版本 1.0.2），它没有严格的上下文转义 $sce。这解释了您对 ngSanitize 模块的用法。

您的过滤器代码是正确的，但您应该使用 ng-bind-html.

以不同方式绑定您的文本

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
         <h1 ng-bind-html="test | parseUrl"></h1>
    </div>
</div>

JsFiddle : http://jsfiddle.net/fb4meygo/1/

Answer 2

我更新了JS Fidle

HTML: 添加了

ng-bind-html

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
         <h1 ng-bind-html="test | parseUrl">{{test}}</h1>
    </div>
</div>

Documentation ngBindHtml

Answer 3

借助 linky 过滤器，我们可以检测文本中的链接并以不同方式显示它们。 Linky 通过将所有 URL 包装到锚标记中来获取文本并生成 HTML。它支持电子邮件地址、http、https 和 mailto。

HTML:

<div ng-app="myApp" ng-controller="myController">
    <div>
        <p ng-bind-html="myText | linky :'_blank'"></p>
        <textarea ng-model="myText" style="width: 420px; height: 120px"></textarea>
    </div>
</div>

控制器：

var myApp = angular.module('myApp', ['ngSanitize'])
.controller('myController', ['$scope', function ($scope) {
    $scope.myText = "Some default text is here http:/tothenew.com/";
}]);

angularjs 输出 html 可点击元素而不是 html 作为字符串

angularjs to output html clickable element instead of html as a string

angularjs

angularjs-filter