AngularJS 从文本创建 html/link/anchor (escape/unescape html in view)

Question

我有一个分配了值的控制器：

$scope.post = 'please visit http://stackoverflow.com quickly';

我的 html 中有一些文本：

<p>{{post}}</p>

我想制作一个可点击的网址链接（用锚标签包围它）。

我尝试将我的 html 更改为：

<p ng-bind-html="post | createAnchors"></p>

这是一个简化的问题示例：

http://jsfiddle.net/T3fFt/4/

问题是，我怎样才能逃避整个帖子文本，除了链接，它会被锚标签包围？ ?

Answer 1

我认为您可以为此使用 Angular 的链接过滤器：https://docs.angularjs.org/api/ngSanitize/filter/linky

你可以这样使用它：

<p ng-bind-html="post | linky"></p>

您必须包含 Angular 的清理模块才能使 linky 工作：

angular.module('myApp', [
    'ngRoute',
    'ngSanitize',
    'myApp.filters', 
    ...

Answer 2

你可以用这个替换字符串：

'please visit http://stackoverflow.com quickly'.replace(/(http[^\s]+)/, '<a href="$1">$1</a>')

那么您需要使用$sce 服务和ngBindHtml 指令。

$sce 是一种提供严格上下文转义服务的服务 AngularJS。

因此，在您的过滤器中，您需要使用a 标签包装链接，然后使用$sce.trustAsHtml 返回一个受信任的html：

filter('createAnchors', function ($sce) {
    return function (str) {
        return $sce.trustAsHtml(str.
                                replace(/</g, '&lt;').
                                replace(/>/g, '&gt;').
                                replace(/(http[^\s]+)/g, '<a href="$1">$1</a>')
                               );
    }
})

工作示例：http://jsfiddle.net/T3fFt/11/