如何在指令模板中使用controller $ scope

Question

我正在尝试使用Angular实现带有自定义指示器的Bootstrap Carousel，Carousel运行良好，但我无法自定义指示器。

var App = angular.module('App', ['ngAnimate', 'ui.bootstrap', 'ngTouch']);
App.controller('Carousel', function($scope, $http, $element){
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    var slides = $scope.slides = [];

    $scope.slides = [{"img":"images\/bg-slider1.jpg","name":"GIFTS","class":"pinkbg"},{"img":"images\/bg-slider2.jpg","name":"FASHION","class":"ltgreen"},{"img":"images\/bg-slider1.jpg","name":"ASTROLOGY","class":"voilet"},{"img":"images\/bg-slider2.jpg","name":"ORGANIC","class":"green"},{"img":"images\/bg-slider1.jpg","name":"SPORTS","class":"yellow"},{"img":"images\/bg-slider2.jpg","name":"APPLIANCES","class":"grey"}];
    $scope.getNameByIndex = function(index){
        return $scope.slides[index]['name'];
    }
});

angular.module("template/carousel/carousel.html", []).run(["$templateCache", "$http", function($templateCache, $http) {
  $templateCache.put("template/carousel/carousel.html",
    "<div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\" ng-swipe-right=\"prev()\" ng-swipe-left=\"next()\">\n" +
    "    <ol class=\"carousel-indicators\" ng-show=\"slides.length > 1\">\n" +
    "        <li ng-repeat=\"slide in slides | orderBy:indexOfSlide track by $index\" ng-class=\"{active: isActive(slide)}\" ng-click=\"select(slide)\" class='{{slide.class}}'>{{slide.name}}</li>\n" +
    "    </ol>\n" +
    "    <div class=\"carousel-inner\" ng-transclude></div>\n" +
    "</div>\n" +
    "");
}]);

$scope.slides还有其他属性，name和class需要放在指标中。我怎么能这样做？

请参阅Plunker

Answer 1

首先，这引起了我的兴趣，为什么范围无法访问。在对GitHub上可用的源代码进行详细分析后，我发现该范围正在库中被隔离。

Plukr Link

在plunkr上我修改了库。文件名： angular-bootstrap-modified.js

请阅读以下详细信息。

请参阅Git Hub中的以下代码块：

.directive('carousel', [function() {
  return {
    restrict: 'EA',
    transclude: true,
    replace: true,
    controller: 'CarouselController',
    controllerAs: 'carousel',
    require: 'carousel',
    templateUrl: function(element, attrs) {
      return attrs.templateUrl || 'template/carousel/carousel.html';
    },
    scope: {
      interval: '=',
      noTransition: '=',
      noPause: '=',
      noWrap: '&'
    }
  };
}])

新创建的指令隔离范围变量从其父范围继承以下数据。

{
   interval: '=',
   noTransition: '=',
   noPause: '=',
   noWrap: '&'
}

最后发现它是图书馆本身的一个限制。

所以我修改了库来实现解决方案。以下是我改变的内容

图书馆代码：

scope: {
         interval: '=',
         noTransition: '=',
         noPause: '=',
         noWrap: '&',
         slidesData : '=slides'
    }

以及HTML：

<carousel interval="myInterval" no-wrap="noWrapSlides" slides="slides">

修改后，volla！现在，指令隔离范围也继承了幻灯片数据。甜！

可以找到有关Angular指令的信息 - here

接下来调整了模板代码：我所做的就是将幻灯片引用更改为 slideData

angular.module("template/carousel/carousel.html", []).run(["$templateCache", "$http", function($templateCache, $http) {
  $templateCache.put("template/carousel/carousel.html",
    "<div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\" ng-swipe-right=\"prev()\" ng-swipe-left=\"next()\">\n" +
    "    <ol class=\"carousel-indicators\" ng-show=\"slidesData.length > 1\">\n" +
    "        <li ng-repeat=\"slide in slidesData | orderBy:indexOfSlide track by $index\" ng-class=\"{active: isActive(slide)}\" ng-click=\"select(slide)\" class='{{slide.class}}'>{{slide.name}} - {{$index}}</li>\n" +
    "    </ol>\n" +
    "    <div class=\"carousel-inner\" ng-transclude></div>\n" +
    "</div>\n" +
    "");
}]);

现在好了，我可以在<ol></ol>标记元素上看到名称和类。

但是现在切换动画不会发生在<li> .Below是比较范围而不是索引的例程（我不知道为什么？）

$scope.isActive = function(slide) {
     return self.currentSlide === slide;
};

我通过观察调试器控制台上的表达式来理解

最后的话：

如果你想以某种方式实现它......你必须修改库源本身。如果您想要自定义滑块或使用Angular Bootstrap库提供的，我建议您查看其他滑块。

希望以上信息解释限制。快乐的编码！

GitHub问题logged

此问题的更新

根据Github问题更新

，将在未来版本中实施轮播定制