Angular和jquery插件的动态绑定

Question

我有一个示例应用程序，在那里我需要旋转，比如说在Angular中的待办事项列表。因此，我希望每次只显示一个项目，而不是在列表中显示待办事项，并逐个轮换其余的项目。我使用jquery cycle插件来达到这个效果，因为todo是在运行时添加的，所以jquery cycle插件不会选择更改。任何建议如何实现这一点。

我已经发布了一个示例演示

    var app = angular.module('App', []);
app.controller('AppCtrl', function($scope) {
  $scope.guys = ['Mike','Zerrra','Rick','Tom','Silva','Pollo'];
  $scope.addPerson = function() {
    $scope.guys.push($scope.newPerson);
    $scope.newPerson = '';
  }
});


app.directive('rp', function() {
  return {
    restrict: 'A',
    link:function(scope, elem, attrs) {
      $(elem).cycle({
                fx: 'scrollHorz',
                speed: 'slow',
                timeout: 1000,
                prev: '.prev',
                next: '.next'
            }); 
    }
  }
})

http://jsfiddle.net/WK2Fg/119/

Answer 1

这是我的解决方案的jsfiddle。这就是你要找的吗？

http://jsfiddle.net/WK2Fg/126/

var app = angular.module('Application', []);
app.controller('AppCtrl', function($scope) {
    debugger;
  $scope.guys = ['Mike','Zerrra','Rick','Tom','Silva','Pollo'];
  $scope.addPerson = function() {
      debugger;
    $scope.guys.push($scope.newPerson);
    $scope.newPerson = '';
  }
});


app.directive('rp', function() {
  return {
    restrict: 'A',
    scope: { guys: "=" },
    link: function (scope, elem, attrs){
      scope.$watch('guys', function(value) {
          debugger;
          $(elem).empty();

          $.each(value, function(){
              var guy = this;
              $(elem).append("<li>"+ guy +"</li>");
          });

          $(elem).cycle({
                fx: 'scrollHorz',
                speed: 'slow',
                timeout: 1000,
                prev: '.prev',
                next: '.next'
            });
      }, true);
    }
  }
})

HTML：

  <div class="container" ng-app="Application">
    <div class="row" ng-controller="AppCtrl">
      <a href="#" class="left">Left</a>
        <ul class="middle" guys="guys"  rp ></ul>
      <a href="#" class="right">Right</a>
        <input type="text" ng-model="newPerson" />
      <button ng-click="addPerson()">Add Person</button>
    </div>
  </div>

附注：

我不太熟悉你用来做循环的jQuery插件，所以目前我在添加新元素后重置了它。如果这个插件有一些在旅途中添加新元素的功能，你可以更换手表，以获得更流畅的体验。我希望根据我的回答，你能弄清楚剩下的问题。