【发布时间】：2014-01-26 05:25:59
【问题描述】：
我正在尝试创建一个测验指令，并使用 Angular UI Bootstrap 的 Carousel 指令作为参考。
Angular UI Boostrap 轮播使用外部“carousel”指令和内部“slide”指令。我查看了代码和参考实现，但我无法理解某些内容。
外部标记（即页内原始、预渲染、预角化的 html）在对象数组上实现 ng-repeat。
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
我了解中继器是如何工作的，因为“幻灯片”是对 $scope.slides 对象数组的引用。我不明白的是对“slides()”作为模板中的一个函数的引用。数组如何变成函数？
指令实现为：
.directive('carousel', [function() {
return {
restrict: 'EA',
transclude: true,
replace: true,
controller: 'CarouselController',
require: 'carousel',
templateUrl: 'template/carousel/carousel.html',
scope: {
interval: '=',
noTransition: '=',
noPause: '='
}
};
}])
carousel.html 的模板如下。注意 li 中继器中对“slides()”的引用。
angular.module("template/carousel/carousel.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/carousel/carousel.html",
"<div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\">\n" +
" <ol class=\"carousel-indicators\" ng-show=\"slides().length > 1\">\n" +
" <li ng-repeat=\"slide in slides()\" ng-class=\"{active: isActive(slide)}\" ng-click=\"select(slide)\"></li>\n" +
" </ol>\n" +
" <div class=\"carousel-inner\" ng-transclude></div>\n" +
" <a class=\"left carousel-control\" ng-click=\"prev()\" ng-show=\"slides().length > 1\"><span class=\"icon-prev\"></span></a>\n" +
" <a class=\"right carousel-control\" ng-click=\"next()\" ng-show=\"slides().length > 1\"><span class=\"icon-next\"></span></a>\n" +
"</div>\n" +
"");
}]);
更新
我刚刚查看了 CarouselController 中的代码并看到了这些行。所以，这就是它的来源。谢谢，pkozlowski.opensource 的确认。 :^)
var self = this,
slides = self.slides = [],
....;
$scope.slides = function() {
return slides;
};
【问题讨论】：
标签： angularjs angularjs-directive angular-ui-bootstrap