Question

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

控制台或其他任何内容都没有错误。如果我在console.log上执行attrs.bxSlider，我会看到我在上面的HTML中定义的所有参数。我在这做错了什么？我将jQuery 1.10.2包含在angular include之上。

Answer 1

以下是工作示例：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');
                });
            }
        }
    }
}]);

将jQuery插件转换为指令

1 个答案: