2

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

stackoverflow 为我提供了这样的解决方案：

<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());
            });           
        }
    };      
 });

和演示

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

4

2 回答 2

1

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

一种选择是自己跳过ng-bind-html和$compile/或$parse您的html。AngularngBindHtml本身做了一些事情：

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

Angular的相关源码可以看这里

所以你总是可以编写一个自定义指令来完成这些事情，以及后处理（如果需要，甚至是预处理）。类似于以下内容：

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.
});
于 2015-07-14T14:54:48.587 回答
0

我可能完全误解了您要寻找的东西，但是，如果问题是；

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

这个 jsBin展示了如何。

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

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

等等，不$watchers，您可以完全废弃自定义指令。

哦， 如果这不是您所追求的，请告诉我，我将删除我的答案。

于 2015-07-14T15:25:30.640 回答