Angularjs ng绑定html-如何在新窗口中打开链接？_Angularjs_Ng Bind Html

Angularjs ng绑定html-如何在新窗口中打开链接？

angularjs

Angularjs ng绑定html-如何在新窗口中打开链接？,angularjs,ng-bind-html,Angularjs,Ng Bind Html,我正在使用ng bind html在我的网站上发布一些html内容。问题是，如果内容有链接，则单击时链接会在同一窗口中打开。我怎样才能在新窗口中打开它 <div ng-bind-html="currentElement.content"></div> 当前元素中包含的链接。内容的属性target=''为空' <a href="open/me/in/new/window" target="_blank">MyLink</a> 更多细节 <!

我正在使用ng bind html在我的网站上发布一些html内容。问题是，如果内容有链接，则单击时链接会在同一窗口中打开。我怎样才能在新窗口中打开它

<div ng-bind-html="currentElement.content"></div>

当前元素中包含的链接。内容的属性target=''为空'

<a href="open/me/in/new/window" target="_blank">MyLink</a>

更多细节

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="angular-sanitize@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-sanitize.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="test" ng-controller="HomeCtrl">
    <h1>Test </h1>
    <div ng-bind-html="myHtml | addTargetBlank"></div>
  </body>

</html>


试验

//script.js

angular.module('test', ['ngSanitize'])
.filter('addTargetBlank', function(){
  return function(x) {
    var tree = angular.element('<div>'+x+'</div>');//defensively wrap in a div to avoid 'invalid html' exception
    tree.find('a').attr('target', '_blank'); //manipulate the parse tree
    return angular.element('<div>').append(tree).html(); //trick to have a string representation
  }
})

.controller('HomeCtrl', function($scope){
  $scope.myHtml = 'test html content 1 <a href="#">click here</a>, test html content 2 <a href="#">click here</a>, test html content 3 <a href="#">click here</a>';
})
;

angular.module（'test'，['ngSanitize']））
.filter（'addTargetBlank'，函数（）{
返回函数（x）{
var tree=angular.element（“”+x+“”）；//防御性地用div包装以避免“无效html”异常
tree.find（'a'）.attr（'target'，'u blank'）；//操作解析树
返回angular.element（“”）.append（tree）.html（）；//使用字符串表示的技巧
}
})
.controller（'HomeCtrl'，函数（$scope）{
$scope.myHtml='测试html内容1，测试html内容2，测试html内容3'；
})
;

currentElement.content看起来像什么？他们是否有

target=“\u blank”

并且是目标属性被剥离的问题吗？currentElement.content中的链接不一定有target=“\u blank”。对于那些没有的人，我有办法强迫他们吗？谢谢你的回复，杰克。currentElement.content中的链接不一定具有“target=“\u blank””。这些是我得到的RSS提要。如果可能的话，我正在寻找一种方法来强制它在一个新窗口中打开。编写一个过滤器来解析html内容并添加target属性，您将得到ng bind html=“currentElement.content | addTargetBlank”原始脚本将向输出HTML添加一个额外的

，这通常不是问题，但会引入一个新元素。通过将其从

return angular.element（“”）.append（tree.html（））更改为
，可以进行轻微修改，以避免额外的
//使用字符串表示法的技巧

仅返回tree.html（）

angular.module('test', ['ngSanitize'])
.filter('addTargetBlank', function(){
  return function(x) {
    var tree = angular.element('<div>'+x+'</div>');//defensively wrap in a div to avoid 'invalid html' exception
    tree.find('a').attr('target', '_blank'); //manipulate the parse tree
    return angular.element('<div>').append(tree).html(); //trick to have a string representation
  }
})

.controller('HomeCtrl', function($scope){
  $scope.myHtml = 'test html content 1 <a href="#">click here</a>, test html content 2 <a href="#">click here</a>, test html content 3 <a href="#">click here</a>';
})
;