使用指令 - >控制器更改不起作用更改角度传送带位置

Question

我正尝试创建一些事件触发器来更改角度传送带（Github repo）的位置。

See the plunker一个工作版本

预期的行为是你上点击“转到位置：0”的文本和旋转木马会改变索引位置为0。

这是使用两个完成rn-carousel-index="carouselIndex"

该范围值是通过设置传递到指令：：carousel-index="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的观察者并不总是变化。此外，更重要的是，传送带行为改变位置不起作用。

$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