angularjs - Angular : running function in controller when all directives are loaded

Question

我正在尝试编写一些代码，这些代码允许我在 Controller 中运行一个函数，但只有在整个 dom 设置并准备就绪后(包括指令链接函数运行等)。

我目前正在通过 $rootScope 广播在 ctrl/service 和指令之间进行通信。指令未拾取 Controller 加载时的第一个广播。原因当然是 Controller 在指令链接函数运行之前加载。我读过一些类似的问题，人们建议对这些调用使用 $timeout 。不幸的是，这并不总是有效，我不想让我的 ctrl/services 被大量的 $timeout 调用弄乱。因此，我正在寻找另一种解决方案来解决我的问题。

通信模式如下:

1.) Controller 告诉服务准备一些数据(通过服务中的函数调用)

2.) 服务告诉指令显示数据(通过广播)

3.) 指令显示数据...或者在我的情况下不显示:(

编辑:

由于计时在我的应用程序中至关重要，因此我基本上正在寻找一种在所有 Angular 组件完成加载后立即在 Controller 中启动功能的方法。 Controller 中的该函数将通过为范围变量分配值来显示内容。同时它将开始花费时间。当然，我只能在指令加载后才开始这样做，否则挖掘是错误的，或者指令尚未准备好显示内容等。

我已经阅读了 Ben Nadel 的一篇博客文章，其中基本上展示了指令是如何加载的。我希望设置一个最后加载的外部指令，这样我就可以从那里触发完成的加载。不幸的是，只要任何内部指令使用 templateUrl，这就不起作用。 http://www.bennadel.com/blog/2603-directive-controller-and-link-timing-in-angularjs.htm

Answer 1

使用 $timeout 会很糟糕。不要那样做。您无法定义服务器调用将花费多长时间。

我建议使用这种模式:

• 让 Controller 使用服务来加载一些数据，并让 Controller 中的 Promise 将返回数据分配给作用域变量。
• 将该范围变量传递到您的指令中。
• 在指令链接函数中设置一个监视，当它加载时，它将从未定义的值变为所需的值。完成!

//在你的 Controller 中

YourService.all().then(function(data) {
  $scope.data = data;
});

//在你看来

<some-directive your-data="data"></some-directive>

//在你的指令中

angular.module('blah.directives').directive('someDirective', function() {
    return {
      scope: {
        yourData: '='
      },
      link: function(scope, element, attrs) {

        var watcher = scope.$watch('yourData', function() {
          if(scope.yourData === undefined) return;

          // at this point your data will be loaded, do work

          // optionally kill watcher at this point if it's not going to update again
          watcher();
        });
      }
    }
  });