Question

我正在编写一个AngularJS应用程序，它从服务器获取帖子列表，然后使用ngRepeat和自定义post指令输出所有帖子。

post对象的一部分是一个hb blob，我现在通过首先执行$ sce.trustAsHtml（blob）添加到指令中，然后使用ng-bind-html指令并将可信的html blob传递给它。它工作正常，但现在我想在将html添加到输出之前修改它。例如，我想查找所有链接标记并向其添加target =“_ blank”。我还想从任何元素中删除任何内容可编辑属性。等

这样做的最佳方式是什么？我正在考虑将其加载到文档片段中，然后递归迭代所有孩子做我需要做的事情。但我认为有更好的AngularJS方法可以做到这一点吗？

编辑：

这里有一个代码集，里面有我的例子： http://codepen.io/niltz/pen/neqlC?editors=101

Answer 1

如果要添加本身是指令的属性，那么添加它们的最佳位置是在自定义指令的编译函数中。

如果它们只是普通的旧属性，那么在运行块中挂入DOM就绪并使用jquery添加属性没有任何问题。

var app = app.module('app',[]);
app.run(function ($rootScope){
       $(document).ready(function()
                $rootScope.$apply(function(){
                       $('a').attr('title','cool');
                 });
       })
});

如果要在编译阶段之后但在角度生命周期的链接阶段之前添加属性，那么在控制器函数中执行它的好地方就是放置在body元素上的指令。 / p>

  <body ng-controller="bodyCtrl">
  </body>

   app.controller('bodyCtrl', function($element){
           $('a', $element).attr('title','cool');
   });

在编译阶段，angular将遍历DOM树，将元素与指令匹配，并沿途转换HTML。在链接阶段，指令通常会设置监视处理程序，以在模型更改时更新视图。通过在body元素上放置一个指令，它确保所有指令都已编译，但链接阶段尚未启动。

Answer 2

您可以通过它创建filter和管道（|）您的内容。类似的东西：

<p ng-bind="myblob | myCleanupFilter">

您的myCleanupFilter看起来像这样（未经过测试）：

angular.module('myApp').filter('myCleanupFilter', function () {
  return function cleanup (content) {
    content.replace('......') // write your cleanup logic here...
  };
});

在AngularJS指令中绑定它之前修改html的最佳方法

2 个答案: