I'm currently utilizing the angular-flexslider plugin.
Here's my bower.json file configuration:
{
"name": "...",
"version": "1.0.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"angular-resource": ">=1.2.*",
"angular-cookies": ">=1.2.*",
"angular-sanitize": ">=1.2.*",
"angular-bootstrap": "~0.11.0",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-ui-router": "~0.2.10",
"angular-google-maps": "~2.1.0",
"angular-animate": "~1.3.15",
"ng-table": "~0.5.4",
"angular-touch": "~1.3.15",
"angular-flexslider": "~1.3.2"
},
"devDependencies": {
"angular-mocks": ">=1.2.*",
"angular-scenario": ">=1.2.*"
},
"resolutions": {
"angular": "1.3.15"
}
}
I have included FlexSlider's CSS in my index.html:
<link rel="stylesheet" type="text/css" href="/components/flexslider/flexslider.css">
Next step is to include the necessary scripts (maintain order):
<script src="/components/jquery/jquery.js"></script>
<script src="/components/flexslider/jquery.flexslider.js"></script>
<script src="/components/angular/angular.js"></script>
<script src="/components/angular-flexslider/angular-flexslider.js"></script>
In my AngularJS application, I import the angular-flexslider module as follows:
'use strict';
angular.module('autoPrivilegeApp', [
'ngCookies',
'ngResource',
'ngAnimate',
'ngTable',
'ngTouch',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'uiGmapgoogle-maps','angular-flexslider'])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider
.otherwise('/');
window.angular
$locationProvider.html5Mode(true);
});
I've initialized some slides in my MainCtrl:
$scope.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
The main.html contains the structure for displaying these slides:
<header class="hero-unit" id="banner">
<div class="container">
<div ng-controller="MainCtrl">
<flex-slider slide="s in slides" animation="slide">
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
</div>
</div>
</header>
However, upon execution, an error occurs:
angular.js:11655 Error: [$compile:multidir] Multiple directives [flexSlider, slide] asking for transclusion on: http://errors.angularjs.org/1.3.15/$compile/multidir?p0=flexSlider&p1=slide&p2=transclusion&p3=%3Cdivlass%3D%flexslider-container%22%20slide%3D%s%in%slides%22%20animation%3D%slide%22%3E at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:63:12) at assertNoDuplicate (http://localhost:9000/bower_components/angular/angular.js:8035:15) at applyDirectivesToNode (http://localhost:9000/bower_components/angular/angular.js:7397:13) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7039:15) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) at compile (http://localhost:9000/bower_components/angular/angular.js:6946:15) at compile (http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4013:20) at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9)(anonymous function) @ angular.js:11655$get @ angular.js:8596invokeLinkFn @ angular.js:8260nodeLinkFn @ angular.js:7768compositeLinkFn @ angular.js:7117publicLinkFn @ angular.js:6996updateView @ angular-ui-router.js:3959(anonymous function) @ angular-ui-router.js:3921$get.Scope.$broadcast @ angular.js:14785$state.transitionTo.$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3311processQueue @ angular.js:13248(anonymous function) @ angular.js:13264$get.Scope.$eval @ angular.js:14466$get.Scope.$digest @ angular.js:14282$get.Scope.$apply @ angular.js:14571done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js:9829