Javascript 将jQuery插件转换为指令_Javascript_Jquery_Angularjs_Bxslider

Javascript 将jQuery插件转换为指令

javascript jquery angularjs

Javascript 将jQuery插件转换为指令,javascript,jquery,angularjs,bxslider,Javascript,Jquery,Angularjs,Bxslider,我正在尝试将现有的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, infinit

我正在尝试将现有的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>

我得到的是一个项目符号列表中的图像列表。CSS确实得到了应用，但是它作为旋转木马的动作不起作用。应该是这样的：

不管我得到什么

控制台中没有任何错误或任何东西。如果我在

attrs.bxSlider

上执行

console.log

，我会看到上面HTML中定义的所有参数。我做错了什么？我将jQuery 1.10.2包含在角度包含之上。

以下是工作示例：

解决方案的一部分来自

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>

尝试在

$timeout

中包装。。。需要给

ng repeat

一个机会来完成

$timeout

中的哪一部分？滑块pluginAh的初始化，这很好。我很好奇，有没有比使用超时更“正确”的方法呢？

ng repeat

为每个项目创建作用域，作用域的一部分是

$last

…当它为真时，可以从中触发滑块

<!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');
                });
            }
        }
    }
}]);