AngularJS 只显示 ng-repeat 中的最后一个元素 [英] AngularJS only shows last Element in ng-repeat

问题描述

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

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

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

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

.directive('画廊', function() {返回 {限制:'A'，templateUrl: 'views/gallery.html',范围: {画廊:'='},链接:函数(范围，元素，属性){//首先生成html，//这里设置内容scope.link = scope.gallery.link;scope.title = scope.gallery.title;scope.elements = angular.copy(scope.gallery.elements);scope.num = scope.gallery.elements.length;}};}

这里是模板:

</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>

<ul ng-click="nextSlideshow()" class="slides" slideshow="false" control-nav="false" direction-nav="false" flex-slider slide="元素中的元素"><li><img ng-src="{{element}}" alt=""></li>

<a ng-href="{{link}}" target="_blank"><h4>more</h4></a><h5>---------------------------------------</h5>

最后我怎么称呼它:

<li ng-repeat="画廊中的画廊"><div 画廊="画廊"></div>

解决方案

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

好消息您的代码没有做错

坏消息你的代码没有做错

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

选项

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

这是我创建的 plnkr此 plnkr 显示了我添加的 ng-repeat，以说明您的代码应该根据指令的创建方式工作.

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

I've got a strange behaviour using flexslider to render a bunch of galleries. As shown below I've got an array of several objects that conclude an array of images. When I "render" the galleries, all galleries appear but only the last one shows its images. On all galleries the indicator for the number of images in that particular, as well as the title and link, are correct, but the images are missing.

Do I do something(/a lot) wrong here? Here is my code:

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

I want to show each gallery with a directive and ng-repeat. The directive should show the title and render the gallery with flexslider(https://github.com/thenikso/angular-flexslider). Directive:

.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;

          }
      };
  }

Here the template:

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

And finally how i call it:

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

解决方案

Well I've got some good news and some bad news...

Good News You are doing nothing wrong in your code

Bad News You are doing nothing wrong in your code

Explanation The directive you're trying to use FlexSlider has some limitations as currently written. The reason you're only seeing one set of data rendered is because the association of the slide attribute and all other logic within the directive is written into the compile (see line 11 in flex-slider.js) function when anything related to the scope of the directive should be performed within the link function.

Options

1. Contact the developer of the directive and submit a bug report
2. Resolve the issue yourself within the directive
3. Write your own component

Here is a plnkr I created This plnkr shows an ng-repeat that I added to illustrate that you're code should be working based upon how the directive was created.

Note The developer likely never came across this scenario as the intention for creating it may have been to only have one instance at a time.

这篇关于AngularJS 只显示 ng-repeat 中的最后一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！