Question

我正在尝试创建一个测验指令，我正在使用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对象数组的引用。我不明白的是“slide（）”作为模板中的函数的引用。数组如何成为函数？

该指令实现为：

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

Answer 1

这里没有魔法:-) slides()函数由carousel指令的控制器显式地暴露在作用域上：

https://github.com/angular-ui/bootstrap/blob/6bc6634cf5dca91331b4147b29f0d0d28fe145d2/src/carousel/carousel.js#L107

AngularJS - 使用Angular UI Bootstrap理解指令中的模板

更新

1 个答案: