web-dev-qa-db-fra.com

Erreur AngularJS - [$ compile: multidir] Erreur de plusieurs directives

J'utilise ces paquets: Un modal angularjs du paquet angular-ui: http://angular-ui.github.io/bootstrap/#/modal And Angular-flexslider à partir d'ici: https: // github. com/EnthusiasticCode/angular-flexslider

Chaque plugin fonctionne bien quand ils sont dans des pages séparées. mais quand je les utilise dans une page, angular-flexslider provoque une erreur:

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

Le fichier modèle est ceci:

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

Et le fichier app.js:

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 ...) });
  }]);

Le fichier controller.js est:

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');
  };
};

Comment puis-je résoudre ce problème? Dites-moi si d'autres informations sont nécessaires. Merci.

UPDATE: balises HTML inutiles supprimées, contenu de controller.js et app.js ajouté.

angularjsangular-ui
12
Morteza Ziaeemehr

Une directive nommée slide semble être à la fois dans angular-flexslider et ui.bootstrap.carousel. Si vous n'avez pas besoin de carrousel, essayez de construire AngularUI Bootstrap sans le soutien du carrousel.

Il semble qu'angular utilise le boostrap slide au lieu du flexslider slide et que le bootstrap nécessite la transclusion qui est également requise par flex-slider, il existe donc un conflit sur la priorité.

Vous pourrez également résoudre ce problème en jouant avec l'ordre de chargement, mais je n'en suis pas certain.

10
Jussi Kosunen

Afin d'éviter tout conflit avec bootstrap carousel, thenikso/angular-flexslider a ajouté une nouvelle directive flex-slide avec slide. 

Les utilisateurs bootstrap peuvent utiliser flex-slide au lieu de la directive slide. 

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

Jussi Kosunen a raison, mais vous n'avez pas besoin de créer votre propre version de AngularUI Bootstrap . Il suffit de renommer slide en fslide en HTML.

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

à

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

Et bien sûr, la directive angular-flexslider.js.

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

à

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

Et n'oubliez pas de laisser ces étapes dans le fichier Lisez-moi pour les autres contributeurs.

3
Anand Bayarbileg

J'ai eu cette erreur..parce que j'ai copié une directive prédéfinie pour créer une nouvelle directive ... et que j'ai oublié de changer le nom de la directive ..directive('addTransaction', function () {

0
Chareesa Graham