Question

我有一个输入框，下面使用angular.js显示发送的内容，但如果输入是http url，我试图将其转换为链接。我提到How to replace plain URLs with links?这个SO页面。
我能够将其转换为标签，但它不是链接。它就像任何其他文本一样..

小提琴链接：http://jsfiddle.net/JY3Za/1/

HTML代码：

<div ng-app>

<div ng-controller="URL">
  <form ng-submit="addTodo()">
      <input type="text" ng-model="save"  size="30"
      placeholder="enter a url"/>
      <input class="btn-primary" type="submit" value="add"/>
</form>
  <h1>{{replaceURLWithHTMLLinks(show)}}</h1>
</div>
</div>

和JS代码..

function URL($scope) {
$scope.shoe="";

$scope.addTodo = function() {
$scope.show=$scope.save;
  $scope.replaceURLWithHTMLLinks=function(text) {

var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
return text.replace(exp,"<a href='$1'>$1</a>"); 
};
};

}

PS：我没有编写正则表达式，而是从上面的Stackoverflow链接中进行测试..

Answer 1

如果您绑定了包含HTML的值，则应使用ngBindHtml，如文档here所示。由于安全原因，常规绑定（以<span>{{ foo }}</span>的形式）会阻止注入实际的HTML。

如果您使用的是最新版本的AngularJS，请记住$sce记录here的限制，这需要一些额外的工作来告诉AngularJS该字符串是安全的

<h1 data-ng-bind-html="yourBindingHere"></h1>

作为旁注，您可以使用replaceURLWithHTMLLinks模块中提供的AngularJS linky过滤器使您的ngSanitize变得多余：

<h1 data-ng-bind-html="yourBindingHere | linky"></h1>

将URL从输入转换为链接

1 个答案: