AngularJS error - [$compile:multidir] Multiple directives error

问题:

I use these packages: An angularjs modal from angular-ui package: http://angular-ui.github.io/bootstrap/#/modal And Angular-flexslider from here: https://github.com/EnthusiasticCode/angular-flexslider

Every plugin works good when they are in separate pages. but when i use them in one page, angular-flexslider causes an error:

Error: [$compile:multidir] Multiple directives [flexSlider, slide] asking for transclusion on: <div class="flexslider-container ng-isolate-scope ng-scope" slide="s in slides" animation="slide"> http://errors.angularjs.org/1.2.0-rc.2/$compile/multidir?p0=flexSlider&p1=s…20ng-scope%22%20slide%3D%22s%20in%20slides%22%20animation%3D%22slide%22%3E     at ... 

The template file is this:

<flex-slider slide="s in slides" animation="slide">     <li>         <img ng-src="{{s}}">     </li> </flex-slider>  <div ng-controller="ModalDemoCtrl">     <script type="text/ng-template" id="myModalContent.html">         <h3>I'm a modal!</h3>     </script>      <button class="btn" ng-click="open()">Open me!</button> </div> 

And app.js file:

angular.module('theApp', ['theApp.filters', 'theApp.services', 'theApp.directives', 'theApp.controllers', 'ngRoute', 'ngSanitize', 'angular-flexslider', 'ui.bootstrap']).   config(['$routeProvider', function($routeProvider) {     $routeProvider.         when('/home', {templateUrl: (someurl...) , controller: (a name ...) });   }]); 

The controller.js file is:

angular.module('theApp.controllers', [])  .controller('SliderMedium', [ '$scope', function($scope) {    $scope.slides = [      'images/slider/01.png',      'images/slider/02.png',    ];  }]);  // ========= THIS IS controllers from angular-ui with no modification =======: // ========================================================================== var ModalDemoCtrl = function ($scope, $modal) {    $scope.items = ['item1', 'item2', 'item3'];    $scope.open = function () {      var modalInstance = $modal.open({       templateUrl: 'myModalContent.html',       controller: ModalInstanceCtrl,       resolve: {         items: function () {           return $scope.items;         }       }     });   }; };  var ModalInstanceCtrl = function ($scope, $modalInstance, items) {    $scope.items = items;   $scope.selected = {     item: $scope.items[0]   };    $scope.ok = function () {     $modalInstance.close($scope.selected.item);   };    $scope.cancel = function () {     $modalInstance.dismiss('cancel');   }; }; 

How can i fix it? Tell me if further information is needed. Thanks.

UPDATE: unnecessary html markups removed, controller.js and app.js contents added.

回答1:

A directive named slide looks to be both in angular-flexslider and ui.bootstrap.carousel. If you don't need carousel, try making a build of AngularUI Bootstrap without carousel support.

It looks like angular is using the boostrap slide instead of the flexslider slide and the bootstrap one requires transclusion which is also required by flex-slider, so there's a conflict as to which one gets precedence.

You may also be able to fix this by fiddling with the load order, but I'm not certain of that.

回答2:

To avoid conflict with bootstrap carousel thenikso/angular-flexslider added a new directive flex-slide along with slide.

Bootstrap users can use flex-slide instead of slide directive.

<flex-slider flex-slide="s in slides" animation="slide">     <li>         <img ng-src="{{s}}">     </li> </flex-slider> 

回答3:

Jussi Kosunen has right, but you don't need to make your own build of AngularUI Bootstrap. Just rename slide to fslide in your HTML.

<flex-slider slide="s in slides" animation="slide">     <li>         <img ng-src="{{s}}">     </li> </flex-slider> 

to

<flex-slider fslide="s in slides" animation="slide">         <li>             <img ng-src="{{s}}">         </li> </flex-slider> 

And of course the directive in angular-flexslider.js.

match = attr.slide.match(/^\s*(.+)\s+in\s+(.*?)(?:\s+track\s+by\s+(.+?))?\s*$/); 

to

match = attr.fslide.match(/^\s*(.+)\s+in\s+(.*?)(?:\s+track\s+by\s+(.+?))?\s*$/); 

And don't forget to leave that steps in Readme file for other contributors.

文章来源: AngularJS error - [$compile:multidir] Multiple directives error