Multiple directives > [flexSlider, slide] asking for transclusion

Question

my bower.json:

{
  "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"
  }
}

In my index.html, i have include FlexSlider's CSS:

<link rel="stylesheet" type="text/css" href="/components/flexslider/flexslider.css">

Then include the scripts (order is relevant):

<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 app, io import the angular-flexslider module:

'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 have init a 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'
];

In my main.html:

<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>

But when i execute this, i have this error:

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

There a warning in their README: Warning to UI Bootstrap users: You must use flex-slide to avoid name conflict with the carousel. — yoavmatchulsky
@yoavmatchulsky GG, but know i have this error Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found! — Mercer
try flex-slide instead of the slide attribute. it clashes with bootstrap's UI's carousel. you can check the code in here — yoavmatchulsky
@yoavmatchulsky thx man all it's good ;) post yur answer i validate it . — Mercer

yoavmatchulsky yoavmatchulsky · Accepted Answer · 2015-05-21T20:21:49

UI Bootstrap's carousel widget conflicts with flex-slider.

If you look at angular-flexslider's code (from here), on line 12, it checks for slide or flexSlide attributes.

Change your slide attributes to flex-slide and it should work.

Edit (add the code):

<header class="hero-unit" id="banner">
  <div class="container">
    <div ng-controller="MainCtrl">
      <flex-slider flex-slide="s in slides" animation="slide">
        <li>
          <img ng-src="{{s}}">
        </li>
      </flex-slider>
    </div>
  </div>
</header>

Multiple directives > [flexSlider, slide] asking for transclusion

1 Answers