angularjs – Angular：ng-bind-html过滤器点击？

发布时间：2020-12-17 08:29:48 所属栏目：安全来源：网络整理

导读：我有一些html数据，我从一个json文件加载。我通过使用ngSanitize在我的应用程序和使用ng-bind-html显示此html数据。现在我想转换json blob中的任何链接的标准 a href =“some_link” link / a 至： a ng-click =“GotoLink('some_link'，'_ system')” lin

我有一些html数据，我从一个json文件加载。

我通过使用ngSanitize在我的应用程序和使用ng-bind-html显示此html数据。

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

>< a href =“some_link”> link< / a>

至：

>< a ng-click =“GotoLink('some_link'，'_ system')”> link< / a&gt ;.
所以我做一些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。*)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!