javascript - 如何确保在渲染 DOM 后调用我的 dom 操作函数/代码？

Question

我有一个角度应用程序，其中的model更改会触发一个弹出窗口，即directive. 我需要在此弹出窗口中选择一个元素，但 DOM 更新 ('$digest') 似乎是异步的，因此它在第一次显示/创建弹出窗口时不起作用。这适用于随后的弹出窗口。如何确保我的代码在创建弹出窗口并使用所有子元素呈现后运行？

这是等效的代码：

angular.module('mymodule', []).directive('myDirective', function() {
  return {
    require: ngModel,
    link: function($scope, element, attrs, ctrl) {
      element.addClass('foo');
      // And similar stuff
      ctrl.$render = function justRender() {
        if (ctrl.viewValue) {
          element.modal('show');
          /* Here I have code for selecting the contents of the pop-up,
             which doesn't work as DOM is not assuredly rendered at this time.
          */
        } else {
          element.modal('hide');
        }
      }
    }
  }
});

Answer 1

$timeout为此，您可以使用 AnguarJS 的服务。

因此，您必须将代码包装在回调中……例如：

$timeout(function() {
    // your code here
}, 0);

$timeout是 AngularJS 的包装器window.setTimeout。它在浏览器事件队列中添加一个新事件；由于渲染引擎已经在这个队列中，浏览器会在处理队列中的新任务之前完成页面渲染。

我在我的博客上写了一篇关于这个主题的文章......当您需要在 DOM 渲染后运行代码时，您可以将其用作参考。