javascript - 与已编译的 Angular 指令 HTML 交互

Question

我正在创建两个 Angular 指令，fooContainer 和 foo，其中 fooContainer 将加载一个或多个 foo 元素并将它们呈现在其容器内。

现在我还想将一些 JavaScript 事件附加到从 fooContainer 指令 link 函数编译的 foo 指令中，因为容器是假定的负责一些事情，例如拖动已编译的 foo 元素。

由于 $compile 在使用 templateUrl 编译指令时是异步的，因此在调用 $compile(html)(scope) 后 HTML 不可用，但是如果我使用HTML 渲染超时大约一秒，我可以与其交互。

这不是最佳选择。 $compile 是否会公开一个事件或 promise ，以便在呈现所有 HTML 时我可以收到通知？

这是一个描述我的问题的 Plunker，http://plnkr.co/edit/coYdRqCsysV4txSFZ6DI?p=preview

Answer 1

按优先顺序排列的方法:

1)尽可能遵循 simmi simmi 的模式并使用 Angular (ng-...)方法。这个最靠谱。

1.5) 更新:下面的 Liquinaut“属性指令”方法似乎有效 - 我只在快速演示 POC 中使用过它，并且运行良好。假设这能经受住更复杂的使用，我更喜欢下面的 watch/jquery 选项 2。但请注意，$last 是专门用于 ng-repeat 的。如果您根据OP注入(inject)非重复标记的$compile block ，那么您需要删除$last检查。需要明确的是，这需要您将属性 post-render 添加到您正在等待渲染的元素，即(每个 OP plunker)

var el = $compile('<foo><div class="hide" post-render>...

带有指令:

.directive('postRender', function() {
    return function(scope, element, attrs) {
        //your code here
        element.hide();
    };
});

我已经 fork 了原始的 plunkr 并概括了允许传递通用回调的方法:http://plnkr.co/edit/iUdbn6zAuiX7bPMwwB81?p=preview

注意:此方法仅适用于编译的元素的基本事件。如果您的编译字符串具有 Angular 变量插值，例如{{value}} 并且您依赖于在回调中解决这些问题，这是行不通的。目前他们还没有解决。如果使用显式链接函数重写 postRender 指令，情况也是如此。下面的选项 2 对于这些情况效果很好，因为它将分辨率至少推到下一个摘要。

2) 我发现即使在非常复杂的应用程序中观察 DOM 也非常可靠(尽管性能应该一如既往地受到监控)。替换您的el.find('.hide').hide();与此 block 一致:

scope.$watch(
  function() { return element.find('.hide').length > 0;},
  function(newVal, oldVal) {
    if (newVal) {
      //DO STUFF
      el.find('.hide').hide();
    }
  }
);

我不太愿意在紧密的循环中使用它，但是对于指令实例化的一次性使用(假设您没有创建 1000 个指令!)，这似乎是合理的 - 我将这种方法用于 ng/ui-slider集成等

3) 如果您正在构建更复杂的东西(以及可重用的组件)，则像素位方法也是一种很好的架构方法，但要注意如果您使用嵌入(例如嵌套指令)，则会创建额外的范围，它将是 $$nextSibling '发射'。请参阅:here

顺便说一句:如果只是想要一种快速的拖放方法，请参阅:http://codef0rmer.github.io/angular-dragdrop/#/