如何在AngularJS指令加载时仅执行一次内部代码

问题根因 #

element.on('load') 写法不生效的核心原因：load 是原生资源加载事件，仅会在<img>、<iframe>、<script>、window这类本身存在异步资源加载逻辑的元素上触发，自定义指令生成的普通DOM节点不会主动派发该事件，因此绑定的回调永远不会执行。

对应场景的实现方式 #

根据你要等待的加载完成节点不同，有三种常用写法：

• 等待指令自身模板完成DOM创建、作用域绑定
  直接把要执行的代码写在link函数内部即可。AngularJS 调用link函数的时机，就是当前指令的模板已经完成DOM渲染、和当前作用域完成绑定的时机，此时直接操作DOM是安全的，不需要额外绑定事件：

  .directive('myDirective', ['$window', function ($window) {
      return {
          restrict: 'AE',
          scope: {
              // 你的作用域绑定配置
          },
          link: function ($scope, element) {
              // 此处代码会在指令加载完成后直接执行
              console.log('指令加载完成，可以正常操作DOM');
          },
          template: '<SOME HTML...>'
      };
  }])
  

  如果你用templateUrl异步加载模板也不需要额外处理，link函数本身就会等待异步模板拉取、渲染完成后才会执行。
• 等待当前渲染周期所有DOM节点挂载到文档流
  如果你需要确保所有嵌套指令、DOM节点都完成挂载，可以注入$timeout服务，把执行逻辑推到下一个事件循环队列，等当前Angular渲染周期彻底结束后再执行：

  .directive('myDirective', ['$window', '$timeout', function ($window, $timeout) {
      return {
          restrict: 'AE',
          scope: {},
          link: function ($scope, element) {
              $timeout(function () {
                  // 此处代码会在当前渲染轮次全部DOM挂载完成后执行
                  console.log('所有DOM节点挂载完成');
              });
          },
          template: '<SOME HTML...>'
      };
  }])
  

• 等待指令内部的异步资源（图片、iframe等）全部加载完成
  不要给指令根元素绑定load事件，直接找到指令内部对应的资源元素，逐个绑定加载事件，统计所有资源加载完成后再执行目标逻辑：

  link: function ($scope, element) {
      const resourceList = element.find('img, iframe');
      if (resourceList.length === 0) return;
      let loadedNum = 0;
      const checkAllLoaded = () => {
          loadedNum++;
          if (loadedNum === resourceList.length) {
              console.log('所有异步资源加载完成');
          }
      };
      resourceList.on('load error', checkAllLoaded);
  }
  

内容的提问来源于stack exchange，提问作者user3174311