插件的Angular和jQuery動態綁定

Question

我有一個示例APP，我需要在其中旋轉說出Angular中的待辦事項列表。 因此，我不想一次在列表中顯示待辦事項，而是一次只想要一項，然后將其余一項逐一旋轉。 我正在使用jquery cycle插件來達到效果，因為待辦事項是在運行時添加的，因此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>

PS

我對用於循環的jQuery插件不是很熟悉，因此目前我在添加新元素后將其重置。 如果此插件具有一些可隨時隨地添加新元素的功能，則可以更換手表，以獲得更流暢的體驗。 我希望您能根據我的回答找出其余的部分。