javascript - 指令如何等待处理元素的动态内插属性？

Question

我有一个名为“connection”的指令，它在给定 div 的 id 的情况下在另外两个 div 之间绘制一条连接线。 ID 通过一些范围数据间接传递。

我的“连接”指令需要获取指定 DOM 元素的边界矩形，以便它可以使用适当的坐标在它们之间绘制一条连接线。

虽然在我的指令的链接函数中，为这些 ID 调用 getElementById() 返回未定义。这是因为在 DOM 中，当我的连接指令的链接函数运行时，这些元素的 ID 仍然是 id="intf-{{intf.id}}"的形式(即，它们还没有插值)。

有问题的 div 是用 ng-repeat 生成的，并且动态分配了它们的 id。

主要问题

我怎样才能让我的指令有效地等待元素 id 通过插值，然后立即通知我的指令，以便它可以更新它的模板和/或范围数据？

或者，我可以强制立即进行插值，以便 getElementById() 可以工作，然后继续我的链接功能吗？

$观察？

我看到您可以使用 attrs.$observe() 来了解您自己的 attr 何时更新，但我看不到如何使用任意元素的 attr 来做到这一点。事实上，在元素的名称被插入之前，我什至无法获取该元素，因为这是我识别它的唯一方法。

不完整的解决方案

作为一个不完整的解决方案，以前处理此代码的开发人员添加了如下内容:

link: function( scope, element, attrs ) {
   var deferUntilElementsExist = function( newVal, oldVal, cb ){
       var sourceElement = document.getElementById(scope.connection.source().id);
       var targetElement = document.getElementById(scope.connection.target().id);
      if( !sourceElement || !targetElement ) {
         $timeout( function(){ deferUntilElementsExist( newVal, oldVal, cb ); }, 0 );
         return;
      }

       updatePath();
       if (cb) {
           cb( newVal, oldVal );
       }
   };

这种方法可行，但行显示速度非常慢，大约每秒 5 行，即使有数百行，就好像每个更新周期处理一行或类似的东西一样。

谢谢。

Answer 1

@pixelbits 的评论让我找到了正确的方向。将第三个参数添加到 $timeout() 设置为 false，这会阻止 $apply() 在每次调用后，使“不完整的解决方案”工作得更快。

link: function( scope, element, attrs ) {
   var deferUntilElementsExist = function( newVal, oldVal, cb ){
       var sourceElement = document.getElementById(scope.connection.source().id);
       var targetElement = document.getElementById(scope.connection.target().id);
      if( !sourceElement || !targetElement ) {
         $timeout( function(){ deferUntilElementsExist( newVal, oldVal, cb ); },
                   0, false );  // Added third parameter here set to false
         return;
      }

       updatePath();
       if (cb) {
           cb( newVal, oldVal );
       }
   };