我怎样才能得到指令视图加载之后火？ [英] How can I get directive to fire after view loaded?

问题描述

我知道这已经被问了一千时间，但我想我已经尝试了各种解决方案，我读过，我似乎无法得到它的工作。

我从中我得到我的图像时，图像揪成我希望他们使用photoswipe显示在移动设备上查看后的API。

我有一个指令：

 使用严格的;App.directive（'photoswipe'，函数（）{
返回{
    更换：假的，
    限制：'A'，
    链接：功能photoSwipeLink（范围，元素，属性）{
      范围。$腕表（attr.photoswipe，功能（价值）{
        angular.element（'＃画廊'）。photoSwipe（{
          enableMouseWheel：假的，
          enableKeyboard：假的
        }）;
      }）;
    }
  };
}）;
 

我得到在控制台这个错误：

  code.PhotoSwipe.createInstance：没有图像通过。
 

我想这是因为该观点已经呈现前指令运行。

如果我添加一个$超时，而不是手表那么code不工作。不幸的是这个解决方案是不行的，因为有可能是从API获取数据的延迟。此外，code不超时内工作。

我都试过了，上面的code，我使用$ viewcontentloaded已经尝试过，曾试图以ng重复最后一个元素之后发射功能，但既不工作。

任何帮助将是非常美联社preciated。

编辑：

这里的HTML。

 ＆LT; H1＆GT; {{gallery.headline}}＆LT; / H1＆GT;
＆LT; UL ID =画廊photoswipe＆GT;
  ＆LT;李班=画廊NG重复=，在gallery.images形象＆GT;
    ＆所述; A HREF ={{image.url}}ALT =image.caption＆GT;
      ＆LT; IMG NG-SRC ={{image.thumb_url}}类=拇指ALT ={{image.caption}}的风格=显示：块;＆GT;
      ＆LT; H3类=标题＆GT; {{image.caption}}＆LT; / H3 GT＆;
    ＆所述; / A＆GT;
  ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

我觉得这是发生，因为角正在处理您的指令，结果被绑定到列表中。这可能是一个竞争条件。解决这个的一种方法是做

  $范围。$广播（picsDownloaded...
 

事件控制器后，你得到的结果。
在该指令，而不是

 范围。$腕表（attr.photoswipe ....
 

做到这一点。

 范围。在$（picsDownloaded......
 

和在处理程序中应用jQuery插件。

I know this has been asked a thousand time, but I think I've tried every solution I've read and I can't seem to get it to work.

I have an API from which I'm getting my images, after pulling the images into the view I want them to use photoswipe for displaying on mobile.

I have a directive:

'use strict';

App.directive('photoswipe', function () {
return {
    replace: false,
    restrict: 'A',
    link: function photoSwipeLink(scope, element, attr) {
      scope.$watch(attr.photoswipe, function(value){
        angular.element('#gallery a').photoSwipe({
          enableMouseWheel: false,
          enableKeyboard: false
        });
      });
    }
  };
});

I get this error in the console:

Code.PhotoSwipe.createInstance: No images to passed.

I guess this is because the directive is running before the view has rendered.

If I add a $timeout instead of watch then the code does work. Unfortunately this solution is no good, as there could be a delay in getting the data from API. Also, the code doesn't work within the timeout.

I have tried, the above code, I've tried using $viewcontentloaded, have tried firing function after last element in ng-repeat, but neither work.

Any help would be much appreciated.

EDIT:

Here's the HTML.

<h1>{{ gallery.headline }}</h1>
<ul id="gallery" photoswipe>
  <li class="gallery" ng-repeat="image in gallery.images">
    <a href="{{ image.url }}" alt="image.caption">
      <img ng-src="{{ image.thumb_url }}" class="thumb" alt="{{ image.caption }}" style="display: block;">
      <h3 class="headline">{{ image.caption }}</h3>
    </a>
  </li>
</ul>

解决方案

I think this is happening because Angular is processing your directive before the results are bound to the list. It is probably a race condition. One way to solve this is to do

$scope.$broadcast("picsDownloaded" ... 

event in your controller after you get the results. On the directive, instead of

scope.$watch(attr.photoswipe ....

do this

scope.$on("picsDownloaded" ....

and in that handler you apply the Jquery Plugin.

这篇关于我怎样才能得到指令视图加载之后火？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！