使用指令->更改控制器更改角度轉盤位置無效

Question

我正在嘗試創建一些事件觸發器來更改Angular Carousel（ Github repo ）的位置。

請參閱插件的工作版本

預期的行為是您單擊“ Go to position：0”（轉到位置：0）文本，然后輪播會將索引位置更改為0。

這可以通過在輪播上進行雙向綁定來實現： 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上的觀察者存在的問題，請嘗試使用Google文檔所說的內容

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