Angular:ng-bind-html 过滤掉 ng-click? [英] Angular: ng-bind-html filters out ng-click?

问题描述

我有一些从 json 文件加载的 html 数据.

我通过在我的应用中使用 ngSanitize 并使用 ng-bind-html 来显示此 html 数据.

现在我想从标准转换 json blob 中的任何链接

• link

到:

• <a ng-click="GotoLink('some_link','_system')">link</a>.

所以我在 json 文件上做一些 regExp 来转换链接，但是由于某种原因 ng-bind-html 过滤掉了它输出中的 ng-click，我不知道为什么.是否应该这样做，如果可以，是否可以禁用此行为?

查看这个 jsFiddle 进行演示:http://jsfiddle.net/7k8xJ/1/

有什么想法吗?

解决方案

好的，所以问题在于它没有编译您包含的 html(angular 没有解析它以查找指令等等).想不出一种方法让它从控制器内部编译，但你可以创建一个包含内容的指令，然后编译它.

所以你会改变

<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) {返回函数(范围，元素，属性){范围.$watch(功能(范围){返回范围.$eval(attrs.compile);},功能(值){element.html(值);$compile(element.contents())(scope);})};}]).controller('MyCtrl', function($scope) {var str = '你好 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 = 结果；});

Angular 1.2.12:http://jsfiddle.net/7k8xJ/4/>

Angular 1.4.3:http://jsfiddle.net/5g6z58yy/(与之前的代码相同，但有些人说它在 1.4 上不起作用.*)

I have some html data that I'm loading in from a json file.

I am displaying this html data by using ngSanitize in my app and using ng-bind-html.

Now I would like to convert any links in the json blob from the standard

• <a href="some_link">link</a>

to:

• <a ng-click="GotoLink('some_link','_system')">link</a>.

So I'm doing some regExp on the json file to convert the links, but for some reason however ng-bind-html is filtering out the ng-click in it's output, and I can't figure out why. Is it supposed to do this, and if so is it possible to disable this behavior?

Check out this jsFiddle for a demonstration: http://jsfiddle.net/7k8xJ/1/

Any ideas?

解决方案

Ok, so the issue is that it isn't compiling the html you include (angular isn't parsing it to find directives and whatnot). Can't think of a way to make it to compile from within the controller, but you could create a directive that includes the content, and compiles it.

So you would change

<p ng-bind-html="name"></p>

to

<p compile="name"></p>

And then for the 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;
});

Angular 1.2.12: http://jsfiddle.net/7k8xJ/4/

Angular 1.4.3: http://jsfiddle.net/5g6z58yy/ (same code as before, but some people were saying it doesn't work on 1.4.*)

这篇关于Angular:ng-bind-html 过滤掉 ng-click?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！