angularjs – ng-bind-html – 如何在新窗口中打开链接?
发布时间:2020-12-17 07:08:12 所属栏目:安全 来源:网络整理
导读:我正在使用ng-bind-html在我的网站上放置一些 HTML内容.问题是如果内容有链接,则单击时链接在同一窗口中打开.如何在新窗口中打开它? div ng-bind-html="currentElement.content"/div 解决方法 currentElement.content中包含的链接应具有target =’_ blank’
我正在使用ng-bind-html在我的网站上放置一些
HTML内容.问题是如果内容有链接,则单击时链接在同一窗口中打开.如何在新窗口中打开它?
<div ng-bind-html="currentElement.content"></div> 解决方法
currentElement.content中包含的链接应具有target =’_ blank’属性
<a href="open/me/in/new/window" target="_blank">MyLink</a> 如果html内容来自外部源,您可以添加一个过滤器来解析html内容并将目标属性添加到链接 这是一个草图: return angular.element(htmlContent).find('a').attr('target','_blank'); 更详细的 <!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>'; }) ; http://plnkr.co/edit/tpl:JHcBgtJ75fVaqFYQlE4a (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |