我有一些html数据,我从一个json文件加载。
我通过使用ngSanitize在我的应用程序和使用ng-bind-html显示此html数据。
现在我想转换json blob中的任何链接的标准
>< a href =“some_link”> link< / a>
至:
>< a ng-click =“GotoLink('some_link','_ system')”> link< / a> ;.
所以我做一些regExp上的json文件转换链接,但由于某些原因,但ng-bind-html是过滤出ng单击它的输出,我不知道为什么。是否应该这样做,如果是这样可以禁用此行为?
查看这个jsFiddle演示:
http://jsfiddle.net/7k8xJ/1/
有任何想法吗?
好吧,所以问题是,它不是编译你包括的html(angular不是解析它来找到指令和whatnot)。不能想办法让它从控制器内部编译,但是你可以创建一个包含内容的指令,并编译它。
所以你会改变
<p ng-bind-html="name"></p>
至
<p compile="name"></p>
然后对于js:
var myApp = angular.module('myApp',['ngSanitize']); angular.module('myApp') .directive('compile',['$compile',function ($compile) { return function(scope,element,attrs) { scope.$watch( function(scope) { return scope.$eval(attrs.compile); },function(value) { element.html(value); $compile(element.contents())(scope); } )}; }]).controller('MyCtrl',function($scope) { var str = 'hello http://www.cnn.com'; var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g; result = str.replace(urlRegEx,"<a ng-click=\"GotoLink('$1',\'_system\')\">$1</a>"); $scope.GotoLink = function() { alert(); } $scope.name = result; });
角度1.2.12:http://jsfiddle.net/7k8xJ/4/
Angular 1.4.3:http://jsfiddle.net/5g6z58yy/(与前面相同的代码,但有些人说它不工作在1.4。*)