使用指令更改 Angular 轮播位置 -> 控制器更改不起作用

Question

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

预期的行为是您单击显示 "Go to position: 0" 的文本，轮播会将索引位置更改为 0。

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

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

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

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

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 上的观察者并不总是发生变化。此外，更重要的是，改变位置的 Carousel 行为不起作用。

$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

使用指令更改 Angular 轮播位置 -> 控制器更改不起作用

Changing Angular Carousel Position with Directive->controller change not working

angularjs

angularjs-scope

angular-carousel