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

How to make sure my dom manipulating function/code is called after the DOM has been rendered?

本文关键字：dom 代码 调用 操作 何确保 确保 我的 函数      更新时间：2023-09-26

我有一个有棱角的应用程序，其中一个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');
        }
      }
    }
  }
});

你可以使用angarjs的$timeout服务。

所以你必须在回调中包装你的代码…比如:

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

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

我在我的博客上写了一篇关于这个话题的文章。当你需要在DOM渲染后运行代码时，你可以使用它作为参考。
相关文章：