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.js中的第11行< / em>）当在scope函数内执行与指令的link相关的任何事情时的函数。

选项

联系指令的开发人员并提交错误报告

在指令
中自行解决问题
编写您自己的组件

<强> Here is a plnkr I created 这个plnkr显示了我添加的ng-repeat，以说明你的代码应该根据指令的创建方式工作。

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

Answer 2

感谢大家提出这个问题并进行分析！这确实是一个angular-flexslider的指令问题。它已在http://github.com/thenikso/angular-flexslider/issues/20

中得到解决

Answer 3

以AngularJs开头的用户的一般信息：

有时您会使用ng-repeat

下拉列表

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Language</a>
<ul class="dropdown-menu" ng-repeat="language in languages">
    <li>
        <a href="#">{{ language.name | translate }}</a>
    </li>
</ul>

不要忘记ng-repeat也会重复ul。输出是：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Language</a>
    <ul class="dropdown-menu ng-scope" role="menu" ng-repeat="language in languages">
        <li><a href="#" ng-click="changeLanguage(language.abv)" class="ng-binding">French</a></li>
    </ul>
    <ul class="dropdown-menu ng-scope" role="menu" ng-repeat="language in languages">
        <li><a href="#" ng-click="changeLanguage(language.abv)" class="ng-binding">English</a></li>
    </ul>
</li>

我们可以看到两个带有下拉列表的ul，这很糟糕，这就是为什么你只能看到数组的最后一个元素。这是正确的方法：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Language</a>
<ul class="dropdown-menu">
    <li ng-repeat="language in languages">
        <a href="#">{{ language.name | translate }}</a>
    </li>
</ul>

希望有所帮助！

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

3 个答案: