將jQuery插件轉變爲指令

我試圖將現有的jquery插件轉換爲在我的角度應用程序中使用的指令。將jQuery插件轉變爲指令

我的HTML：

<div ng-controller="BoxController"> 
    <ul class="bxslider" bx-slider="{mode: 'horizontal', pager: false, controls: true, minSlides: 1, maxSlides:4, slideWidth: 350, slideMargin:10, infiniteLoop: false, hideControlOnEnd: true}"> 
    <li ng-repeat="obj in items track by $index"> 
     <div class="item"><img ng-src="{{obj + $index}}" /></div> 
    </li> 
    </ul> 
</div>

所以我的指令是bx-slider或bxSlider

app.directive('bxSlider', function() 
    { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attrs) 
      { 
       angular.element(element).bxSlider(scope.$eval(attrs.bxSlider)); 
      } 
     } 
    });

會發生什麼事是我在一個項目符號列表獲取圖像的列表。 CSS當然正在得到應用，但它作爲一個旋轉木馬的行爲是行不通的。它應該是這樣的：

http://bxslider.com/examples/carousel-dynamic-number-slides

但是我得到

http://dopserv1.dop.com/bxslider/

在控制檯或任何沒有錯誤。如果我在attrs.bxSlider上執行console.log，我會看到上面HTML中定義的所有參數。我在這裏做錯了什麼？我在上面包含jQuery 1.10.2。

來源

2013-12-09 Ronnie

嘗試在包裝'$ timeout' ...需要給'NG-repeat'機會完成消化 – charlietfl

包裹哪一部分在'$超時'？ – Ronnie

滑塊插件的初始化 – charlietfl

這裏的工作示例：http://plnkr.co/edit/KCwzmG?p=preview

與here未來解決方案的一部分。

HTML

<!DOCTYPE html> 
<html ng-app="plunker"> 
<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link href="style.css" rel="stylesheet" /> 
    <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://bxslider.com/lib/jquery.bxslider.js"></script> 
    <script src="http://code.angularjs.org/1.2.3/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div data-ng-controller="BoxController"> 
    <ul class="bxslider" data-bx-slider="mode: 'horizontal', pager: false, controls: true, minSlides: 1, maxSlides:4, slideWidth: 350, slideMargin:10, infiniteLoop: false, hideControlOnEnd: true"> 
     <li data-ng-repeat="obj in items track by $index" data-notify-when-repeat-finished> 
     <div class="item"> 
      <img data-ng-src="http://lorempixel.com/400/200/sports/{{$index + 1}}/" /> 
     </div> 
     </li> 
    </ul> 
    </div> 
</body> 
</html>

var app = angular.module('plunker', []); 

app.controller('BoxController', ['$scope', function ($scope) { 
    $scope.items = [1, 2, 3, 4, 5]; 
}]); 

app.directive('bxSlider', [function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$on('repeatFinished', function() { 
       console.log("ngRepeat has finished"); 
       element.bxSlider(scope.$eval('{' + attrs.bxSlider + '}')); 
      }); 
     } 
    } 
}]) 
.directive('notifyWhenRepeatFinished', ['$timeout', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      if (scope.$last === true) { 
       $timeout(function() { 
        scope.$emit('repeatFinished'); 
       }); 
      } 
     } 
    } 
}]);

來源

2013-12-10 00:34:03 GFoley83

將jQuery插件轉變爲指令

回答

相關問題