插件的角度和jQuery動態綁定

我有一個示例APP，我需要旋轉說一個在Angular中的todo項目列表。所以不要在列表中顯示待辦事項，我一次只需要一個項目，並逐個旋轉其餘項目。我正在使用jquery循環插件來實現效果，因爲todos在運行時被添加，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/

來源

2015-01-31 Mike

我認爲你的插件只適用於圖像 – micha 2015-01-31 18:35:56

沒有多數民衆贊成在這種情況下，我用它也與文本。 – Mike 2015-01-31 18:36:46

看看控制檯，循環是未定義的。 $（elem）在你的小提琴中使用了angular的jquery lite，而不是完整版本的jquery。所以你的插件和jQuery庫應該更早的鏈接，我猜。 – 2015-01-31 19:00:31

這裏是我的解決方案的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插件，所以目前我在添加新元素後重置它。如果這個插件有一些功能可以隨時添加新元素，您可以更換手錶，以獲得更流暢的體驗。我希望根據我的回答你會發現其餘的。

來源

2015-01-31 19:43:14

嘿，謝謝，它當然在工作，但爲什麼它會向DOM添加兩個li項目。我相信這不是一個插件問題，但與角度範圍的東西，我猜 – Mike 2015-02-02 16:54:59

@Mike你如何重現這個問題？我沒有看到它在我的小提琴中，當我點擊一次只有一個李元素被添加...截圖：http://postimg.org/image/eriaq1ydn/ – 2015-02-02 19:26:12

嗯抱歉老兄我也無法重現這作爲一個獨立的問題。但是我只是遇到了代碼的另一個問題，你知道當你注入調用函數的元素時，函數沒有被調用的原因是什麼。 http://jsfiddle.net/WK2Fg/129/ – Mike 2015-02-06 11:03:42

插件的角度和jQuery動態綁定

回答

相關問題