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

Question

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

stackoverflow 为我提供such solution:

<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

因此，您始终可以编写一个自定义指令来执行这些操作以及后处理（如果需要，甚至是预处理）。大致如下：

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

选项 2（保留$watch，但取消绑定）：

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

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

我可能完全误解了您要查找的内容，但是，如果问题是；

如何在没有 $watcher 的情况下将 HTML 绑定到视图？

this jsBin 展示了如何。

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

因此，实际上只需要相信sometext 可能是HTML（通过使用$sce）并使用ng-bind-html="::sometext" 输出它。

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

---

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