javascript - 动态 $scope DOM 元素未准备好进行插件初始化

Question

对于 AngularJS 的世界来说，这是一个全新的世界，除了我挑选的一些教程和演示之外，这是我第一次尝试构建一些有深度的东西。如果我没有正确解释这可能是一个简单的问题，我们深表歉意!

我有一个看起来像这样的 Controller :

myApp.controller('ShowCtrl', function($scope, $routeParams, $http) {
   $http({
      method: 'GET',
      url: 'rest/details/'+ $routeParams.identifier
   }).then(function successCallback(response) {
      $scope.shows = response.data;
      myPlugin.init();

   }, function errorCallback(response) {
      $scope.shows = "something bad happened";
   });
});

这向自定义 REST 接口(interface)发出 GET 请求，该接口(interface)调用外部/第 3 方 API。然后我获取该 api 响应，将其分配给范围，并循环遍历它以在我的部分 .html 中显示项目

<li ng-repeat="(key, show) in shows" class="required-element">
  {{ show.title }}
</li>

这很好用。范围有响应，我可以按预期循环和显示元素。

出现问题是因为我还使用了一个插件，该插件似乎在将元素写入 DOM 之前进行了初始化。

你可以在上面的代码中看到插件的 .init(); 刚好在将 api 响应分配给 Controller $scope 之后被调用。因此，插件的任何功能都不会绑定(bind)到这些元素。

有什么方法可以推迟我的 init();到我可以确定 DOM 元素已写入页面的时间？我已经做了很多搜索来寻找解决方案，看起来 Angular directive 可能是这里的解决方案？

非常感谢任何帮助!

[更新] - 好的，到目前为止，我找到了几个解决方案(其中一个让我脸红)。不过，这两种方法似乎都不是“最佳”方法。 失败了几次

- 简单的方法。通过 jQuery document.ready() 初始化插件； - 这出于某种原因有效，让我觉得我花了多长时间尝试很傻。(nvm，没有工作)

- 通过将我的 $http GET 请求移动到一个有返回 promise 的 Angular “工厂”。我会用一个加载示波器，然后用另一个加载我的插件。看起来有点矫枉过正，但却是一种学习经验。

Answer 1

您需要将 $timeout 注入(inject)您的 Controller 并像这样使用它:

myApp.controller('ShowCtrl', function($scope, $routeParams, $http, $timeout) {
   $http({
      method: 'GET',
      url: 'rest/details/'+ $routeParams.identifier
   }).then(function successCallback(response) {
      $scope.shows = response.data;
      $timeout(function() {
           myPlugin.init();
      });
   }, function errorCallback(response) {
      $scope.shows = "something bad happened";
   });
});

这样您将仅在摘要循环结束并呈现 View 后调用 myPlugin.init(); 函数。