AngularJS：是否可以在没有 $watch 的情况下对 ng-bind-html 进行 post 处理？

Question

我有 html 内容 应该由 ng-bind-html 指令输出，并且在我想对这些内容进行一些操作之后（例如 DOM 操作、jQuery 插件等）。

Whosebug 为我提供 :

<div ng-app="myApp" ng-controller="myCtrl">
   <div ng-bind="sometext" my-directive>before</div>
</div>

因此创建具有更高优先级的自定义指令并在内部观察：

angular.module('myApp').directive('myDirective', function() { 
    return {
        priority: 10, 
        link: function(scope,element,attrs) {
            scope.$watch(attrs.ngBind, function(newvalue) {
              console.log("element ",element.text());
            });           
        }
    };      
 });

和Demo

但就我不打算更改此内容而言，我不想使用 $watch。没有 $watch 可以吗？

Answer 1

选项 1（根据要求避免 $watch）：

一个选择是跳过 ng-bind-html 和 $compile 或 $parse 你自己的 html。 Angular 的 ngBindHtml 本身做了一些类似的事情：

var ngBindHtmlGetter = $parse(tAttrs.ngBindHtml);
// ... It does some other, less relevant stuff between these
element.html($sce.getTrustedHtml(ngBindHtmlGetter(scope)) || '');

Angular's relevant source code can be viewed here

所以你总是可以编写一个自定义指令来完成这些事情，以及 post- 处理（如果需要，甚至是预处理）。大致如下：

var ngBindHtmlGetter = $parse(attrs.someAttrContainingContent);
element.html($sce.getTrustedHtml(ngBindHtmlGetter(scope)) || '');
doPostProcessing(element); // Your additional stuff goes here

选项2（保留$watch，但解除绑定）：

如果您想使用 ng-bind-html 并且您只是担心周围有额外的观察者，另一种选择对您来说可能更简单，那就是取消绑定观察者。您可以很容易地解除绑定（$watch returns 一个 "unbind" 函数）：

var unbindPostProcess = scope.$watch(attrs.ngBind, function(newvalue) {
    doPostProcessing(element); // Whatever the additional function may be
    unbindPostProcess(); // Perhaps guarded to unbind at the right time.
});

Answer 2

我可能完全误解了你在找什么，但是，如果问题是；

How do I bind HTML to the view without a $watcher?

this jsBin 展示了方法。

通过升级到 angular-1.3.x 您可以访问一次性绑定 {{::expr}}.

因此，这实际上只是信任任何 sometext 可能是 HTML（通过使用 $sce）并使用 ng-bind-html="::sometext" 输出它的问题。

Et voila，没有 $watchers，您可以完全废弃自定义指令。

哦，还有 如果这不是你想要的，请告诉我，我会删除我的答案。

AngularJS：是否可以在没有 $watch 的情况下对 ng-bind-html 进行 post 处理？

AngularJS: Is it possible to do post-processing of ng-bind-html without $watch?

angularjs

angularjs-directive

ng-bind-html

ng-bind