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

使用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>

解决方法:

好吧,我有一些好消息和一些坏消息…

好消息,您的代码没有做错任何事情

坏消息您的代码没有做错任何事情

说明
您尝试使用FlexSlider的指令具有一些当前编写的限制.您只看到一组呈现的数据的原因是,当与范围相关的任何内容时,slide属性与指令中所有其他逻辑的关联都被写入了compile(请参见flex-slider.js中的第11行)函数.该指令的指令应在链接功能内执行.

选件

>与指令的开发者联系并提交错误报告
>在指令中自行解决问题
>编写自己的组件

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

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

标签：flexslider,angularjs,angularjs-directive,angularjs-scope,javascript
来源： https://codeday.me/bug/20191029/1960328.html