├── README.md
├── bower.json
├── package.json
└── src
└── angular-owl-carousel.js
/README.md:
--------------------------------------------------------------------------------
1 | # Angular Owl Carousel
2 |
3 | This directive allows you to back a Owl Carousel with data from an Angular controller.
4 |
5 | *For use with Owl Carousel 2*
6 |
7 | ## Usage
8 |
9 | Javascript:
10 |
11 | // Define app module
12 | angular
13 | .module('myApp', ['angular-owl-carousel']);
14 |
15 | // Create controller
16 | angular
17 | .module('myApp')
18 | .controller('MyController', MyController);
19 |
20 | function MyController() {
21 | this.owl = {
22 | items: ["item 1", "item 2"],
23 | options: {
24 | loop: true,
25 | nav: false
26 | }
27 | };
28 | }
29 |
30 | HTML:
31 |
32 |
37 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-owl-carousel",
3 | "authors": [
4 | "Jonah Dahlquist ",
5 | "Rick de Graaff "
6 | ],
7 | "description": "Populate Owl Carousel with data from an Angular controller",
8 | "main": "src/angular-owl-carousel.js",
9 | "keywords": [
10 | "owl",
11 | "carousel",
12 | "angular",
13 | "directive"
14 | ],
15 | "license": "MIT",
16 | "homepage": "https://github.com/jonahbron/angular-owl-carousel",
17 | "ignore": [
18 | "**/.*",
19 | "node_modules",
20 | "bower_components",
21 | "test",
22 | "tests"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-owl-carousel",
3 | "version": "0.3.0",
4 | "description": "Populate Owl Carousel with data from an Angular controller",
5 | "main": "src/angular-owl-carousel.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/jonahbron/angular-owl-carousel.git"
12 | },
13 | "keywords": [
14 | "owl",
15 | "carousel",
16 | "angular",
17 | "directive"
18 | ],
19 | "author": "Jonah Dahlquist ",
20 | "license": "MIT",
21 | "contributors": [
22 | {"name": "Rick", "url": "https://github.com/rickerd"}
23 | ],
24 | "bugs": {
25 | "url": "https://github.com/jonahbron/angular-owl-carousel/issues"
26 | },
27 | "homepage": "https://github.com/jonahbron/angular-owl-carousel#readme"
28 | }
29 |
--------------------------------------------------------------------------------
/src/angular-owl-carousel.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 'use strict';
3 | angular.module('angular-owl-carousel', [])
4 | .directive('owlCarousel', function ($timeout) {
5 | var owlOptions = [
6 | 'items',
7 | 'margin',
8 | 'loop',
9 | 'center',
10 | 'mouseDrag',
11 | 'touchDrag',
12 | 'pullDrag',
13 | 'freeDrag',
14 | 'merge',
15 | 'mergeFit',
16 | 'autoWidth',
17 | 'startPosition',
18 | 'URLhashListener',
19 | 'nav',
20 | 'navRewind',
21 | 'navText',
22 | 'slideBy',
23 | 'dots',
24 | 'dotsEach',
25 | 'dotData',
26 | 'lazyLoad',
27 | 'lazyContent',
28 | 'autoplay',
29 | 'autoplayTimeout',
30 | 'autoplayHoverPause',
31 | 'smartSpeed',
32 | 'fluidSpeed',
33 | 'autoplaySpeed',
34 | 'dotsSpeed',
35 | 'dragEndSpeed',
36 | 'callbacks',
37 | 'responsive',
38 | 'responsiveRefreshRate',
39 | 'responsiveBaseElement',
40 | 'responsiveClass',
41 | 'video',
42 | 'videoHeight',
43 | 'videoWidth',
44 | 'animateOut',
45 | 'animateIn',
46 | 'fallbackEasing',
47 | 'info',
48 | 'nestedItemSelector',
49 | 'itemElement',
50 | 'stageElement',
51 | 'navContainer',
52 | 'dotsContainer',
53 | // Classes
54 | 'themeClass',
55 | 'baseClass',
56 | 'itemClass',
57 | 'centerClass',
58 | 'activeClass',
59 | 'navContainerClass',
60 | 'navClass',
61 | 'controlsClass',
62 | 'dotClass',
63 | 'dotsClass',
64 | 'autoHeightClass',
65 | // Callbacks
66 | 'onInitialize',
67 | 'onInitialized',
68 | 'onResize',
69 | 'onResized',
70 | 'onRefresh',
71 | 'onRefreshed',
72 | 'onDrag',
73 | 'onDragged',
74 | 'onTranslate',
75 | 'onTranslated',
76 | 'onChange',
77 | 'onChanged',
78 | 'onStopVideo',
79 | 'onPlayVideo',
80 | 'onLoadLazy',
81 | 'onLoadedLazy'
82 | ];
83 |
84 | return {
85 | restrict: 'A',
86 | scope: {
87 | owlOptions: '=owlOptions'
88 | },
89 | transclude: true,
90 | link: function (scope, element, attributes, controller, $transclude) {
91 |
92 | var options = {},
93 | $element = $(element),
94 | owlCarousel = null,
95 | propertyName = attributes.owlCarousel;
96 |
97 | for (var optionValue in owlOptions) {
98 | var currentOptionValue = owlOptions[optionValue];
99 | if (scope.owlOptions[currentOptionValue] !== undefined) {
100 | options[currentOptionValue] = scope.owlOptions[currentOptionValue];
101 | }
102 | }
103 |
104 | element.addClass('owl-carousel');
105 |
106 | scope.$watchCollection(propertyName, function (newItems) {
107 |
108 | if (owlCarousel) {
109 | owlCarousel.destroy();
110 | }
111 | $element.empty();
112 |
113 | for (var i in newItems) {
114 | $transclude(function (clone, scope) {
115 | scope.item = newItems[i];
116 | $element.append(clone[1]);
117 | });
118 | }
119 |
120 | $timeout(function() {
121 | $element.data('owl.carousel', null);
122 | $element.owlCarousel(options);
123 | owlCarousel = $element.data('owlCarousel');
124 | }, 0);
125 |
126 | owlCarousel = $element.data('owlCarousel');
127 | });
128 |
129 | scope.$on("$destroy", function () {
130 | if (owlCarousel) {
131 | owlCarousel.destroy();
132 | }
133 | });
134 | }
135 | };
136 | });
137 | })();
138 |
--------------------------------------------------------------------------------