javascript - 插件的 Angular 和 jquery 动态绑定(bind)

Question

我有一个示例应用程序，我需要在其中旋转 Angular 中的待办事项列表。因此，我不想在列表中显示待办事项，而是一次只需要一项，然后一项一项地旋转其余项。我正在使用 jquery 循环插件来实现效果，因为待办事项是在运行时添加的，所以 jquery 循环插件不会选择更改。任何如何实现这一目标的建议。

我已经提供了一个示例演示

    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 插件，所以目前我在添加新元素后重置它。如果这个插件有一些在旅途中添加新元素的功能，您可以更换 watch ，以获得更流畅的体验。我希望根据我的回答你能弄清楚剩下的事情。