javascript - AngularJS 仅在 ng-repeat 中显示最后一个元素

Question

我在使用 flexslider 渲染一堆画廊时遇到了一个奇怪的行为。如下所示，我有一个由多个对象组成的数组，这些对象构成了一组图像。当我“渲染”画廊时，所有画廊都会出现，但只有最后一个画廊显示其图像。在所有画廊中，该特定图像数量的指示器以及标题和链接都是正确的，但图像丢失了。

我在这里做错了什么(/很多)吗？这是我的代码:

$scope.galleries = [{title: 'gallery1', 'link': 'http://...', elements: 
                        ['img/img1.jpg','img/img2.jpg']},
                    {title: 'gallery2', 'link': 'http://...', elements: 
                        ['img/img3.jpg','img/img4.jpg']}];

我想用指令和 ng-repeat 显示每个画廊。该指令应显示标题并使用 flexslider( https://github.com/thenikso/angular-flexslider ) 呈现画廊。指令:

.directive('gallery', function() {
      return {
          restrict: 'A',
          templateUrl: 'views/gallery.html',
          scope: {
              gallery: '='
          },
          link: function(scope, element, attrs) {
              // first generate html, the

              // set content here
              scope.link = scope.gallery.link;
              scope.title = scope.gallery.title;
              scope.elements = angular.copy(scope.gallery.elements);
              scope.num = scope.gallery.elements.length;

          }
      };
  }

这里是模板:

<a ng-href="{{link}}" target="_blank" ng-bind="title"></a>
<div class="gallery">
  <div class="flexslider">
    <div class="slides-control">
    <a href="" ng-click="prevSlideshow()" class="prev">
    <
      </a>
      <span class="current_pos">1</span>
      /
      <span ng-bind="num" class="total"></span>
        <a href="" ng-click="nextSlideshow()" class="next">
        >
      </a>
    </div>

        <ul ng-click="nextSlideshow()" class="slides" slideshow="false" control-nav="false" direction-nav="false" flex-slider slide="element in elements">
            <li><img ng-src="{{element}}" alt=""></li>
        </ul>
  </div>
  <a ng-href="{{link}}" target="_blank"><h4>more</h4></a>
<h5>---------------------------------------</h5>
</div>

最后是我如何调用它:

<ul class="publications" >
    <li ng-repeat="gallery in galleries">
        <div gallery="gallery"></div>
    </li>
</ul>

Answer 1

好吧，我有一些好消息和一些坏消息...

好消息您的代码没有做错

坏消息你的代码没有做错

解释您尝试使用 FlexSlider 的指令有一些当前编写的限制。您只看到呈现一组数据的原因是因为 slide 属性和指令中所有其他逻辑的关联被写入 compile(参见 flex-slider 中的第 11 行.js) 函数，当任何与指令的 scope 相关的事情都应该在 link 函数中执行时。

选项

1. 联系指令的开发者并提交错误报告
2. 在指令范围内自行解决问题
3. 编写自己的组件

Here is a plnkr I created 此 plnkr 显示了我添加的 ng-repeat 以说明您的代码应该根据指令的创建方式工作。

注意开发人员可能从未遇到过这种情况，因为创建它的目的可能是一次只有一个实例。