插件的Angular和jQuery动态绑定

Question

I have a sample APP, where I need to rotate say a list of todo Items in Angular. so instead of display the todos in a list, I want just one item at a time and rotate the rest one by one. I am using jquery cycle plugin to acheive the effect, since the todos are getting added at run time, the jquery cycle plugin isn't picking the changes. Any suggestions how to acheive this.

I have put up a sample Demo

    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

Here is jsfiddle of my solution. Is that what you were looking for?

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

I am not very familiar with the jQuery plugin you are using to do the cycling, so currently I reset it after adding new elements. If this plugin has some functions that add new elements on the go, you can change the watch, to achieve smoother experience. I hope basing on my answer you'll figure out the rest.