1

我正在尝试创建一些事件触发器来更改 Angular Carousel ( Github repo ) 的位置。

请参阅 plunker以获取工作版本

预期的行为是您单击“转到位置：0”的文本，并且轮播会将索引位置更改为 0。

这是使用 Carousel 上的双向绑定来完成的：rn-carousel-index="carouselIndex"

此范围值通过设置传递给指令：carousel-index="carouselIndex"

修改的控制器方法carouselIndex也通过以下方式传递给指令：index-model="indexModel(value)"

该指令采用范围并具有绑定到应该更改 Carousel 位置的文本的函数：

app.directive('timeline', function () {
  return {
    replace:true,
    scope:{
     indexModel:'&',
     carouselIndex:'='
    },

    link:function (scope, element, attrs) {


          var valueto = 0;

        var textElement = d3.select(".timeLine").text('Go to position: ' + valueto)
        textElement
          .on('click',clickMe)

        function clickMe(d){
          console.log('click');
          console.log("but index is: " + scope.carouselIndex);

          scope.carouselIndex = valueto;
         // scope.$apply(carouselIndex) = valueto;
          scope.indexModel({value: valueto});
          //alert(d);
        }

    }
  }
})

正如你所看到的，当你点击时，观察者$carouselIndex并不总是改变。此外，更重要的是，改变位置的轮播行为不起作用。

$scope.$watch('carouselIndex', function(a,b) {
      console.log('change detected');
      console.log('Index really is: ' + $scope.carouselIndex);
    })
4

2 回答 2

1

Adding a digest() $apply() function solved the problem.

    $scope.indexModel = function(slide) {
      $scope.$apply(function() {
        console.log('change slide ' + slide);

        var changeSlide = parseInt(slide);
        $scope.carouselIndex = changeSlide;
        console.log('Index should be: ' + $scope.carouselIndex);
     )}
   };
于 2015-02-23T05:01:56.870 回答
0

对于观察者的问题$scope.carouselIndex，请尝试文档所说的

Note: If the indicators don't seem to update with the slides, try binding to an object param i.e. carousel.index, set in the controller like $scope.carousel.index = 0

https://github.com/revolunet/angular-carousel

于 2015-11-07T22:32:43.643 回答