Question

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

预期的行为是您单击“转到位置：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);
    })

Answer 1

添加digest() $apply()功能解决了这个问题。

    $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);
     )}
   };

Answer 2

对于$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

使用指令更改角度转盘位置 - >控制器更改不起作用

2 个答案: