我在使用 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 中的第 11 行.js) 函数,当任何与指令的 scope
相关的事情都应该在 link
函数中执行时。
选项
- 联系指令的开发者并提交错误报告
- 在指令范围内自行解决问题
- 编写自己的组件
Here is a plnkr I created 此 plnkr 显示了我添加的 ng-repeat 以说明您的代码应该根据指令的创建方式工作。
注意开发人员可能从未遇到过这种情况,因为创建它的目的可能是一次只有一个实例。
关于javascript - AngularJS 仅在 ng-repeat 中显示最后一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24059492/