我正在尝试将现有的 jquery 插件转换为指令以在我的 Angular 应用程序中使用。
我的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 包含在 Angular 包含之上。
最佳答案
这是工作示例: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>
JS
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');
});
}
}
}
}]);
关于javascript - 将 jQuery 插件变成指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20478081/