Question

我使用carousel angular ui bootstrap作为指令，但遇到了这个问题：

错误：[$ compile：multidir]多个指令[carousel，carousel（module：myApp.common）]要求模板：<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">

它说我在相同的DOM元素上使用了许多指令，这是不真实的。我已经在空白页面中检查了它，但仍然显示错误消息。

我正在使用：

＆＃34; angular＆＃34;：＆＃34; ^ 1.5.0＆＃34;
＆＃34; angular-animate＆＃34;：＆＃34; ^ 1.5.0＆＃34;，
＆＃34; angular-ui-bootstrap＆＃34;：＆＃34; ^ 0.14.3＆＃34;，

检查下面的代码： carousel.js

'use strict';

var CarouselController = (function() {
  /*@ngInject*/
  function CarouselController() {
    this.myInterval = 5000;
    this.noWrapSlides = false;
    this.active = 0;

    var slides = this.slides = [];
    var currIndex = 0;

    for (var i = 0; i < 4; i++) {
      this.addSlide();
    }
  }

  CarouselController.prototype.addSlide = function() {
    var newWidth = 600 + slides.length + 1;

    slides.push({
      image: 'http://lorempixel.com/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  }

  CarouselController.prototype.randomize = function() {
    var indexes = this.generateIndexesArray();
    this.assignNewIndexesToSlides(indexes);
  }

  CarouselController.prototype.assignNewIndexesToSlides = function() {
    for (var i = 0, l = slides.length; i < l; i++) {
      slides[i].id = indexes.pop();
    }
  }

  CarouselController.prototype.generateIndexesArray = function() {
    var indexes = [];
    for (var i = 0; i < currIndex; ++i) {
      indexes[i] = i;
    }
    return this.shuffle(indexes);
  }

  CarouselController.prototype.shuffle = function() {
    var tmp, current, top = array.length;

    if (top) {
      while (--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = array[current];
        array[current] = array[top];
        array[top] = tmp;
      }
    }

    return array;
  }

  return CarouselController;
})();

var carousel = function() {

  return {
    replace: true,
    restrict: 'EA',
    templateUrl: 'app/common/carousel/carousel.html',
    controller: CarouselController,
    controllerAs: 'carousel'
  };
}

module.exports = carousel;

module.js

'use strict';

var angular   = require('angular');
var navbar    = require('./navbar/navbar');
var searchbar = require('./searchbar/searchbar');
var hotel     = require('./latest-hotels/latest-hotels');
var comment   = require('./comment/comment');
var carousel  = require('./carousel/carousel');

angular
  .module('myApp.common', [])
  .directive('navbar', navbar)
  .directive('searchbar', searchbar)
  .directive('latestHotel', hotel)
  .directive('comment', comment)
  .directive('carousel', carousel);

carousel.html：

<div style="height: 305px">
    <uib-carousel active="carousel.active" interval="carousel.myInterval" no-wrap="carousel.noWrapSlides">
        <uib-slide ng-repeat="slide in carousel.slides track by slide.id" index="slide.id">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
                <h4>{{slide.text}}</h4>
            </div>      
        </uib-slide>
    </uib-carousel>
</div>

非常感谢任何想法。谢谢！

Answer 1

这是指令之间的交互。根据消息（多指令[轮播，轮播（模块：myApp.common）]），我认为最可能的原因是您的templateUrl。

您的HTML包含uib-carousel，但随后用作carousel指令的模板。所以你在递归中包含轮播。每个嵌套的都试图替换呼叫站点中的div标签。

我认为你的carousel.html应该是这样的：

<uib-slide ng-repeat="slide in carousel.slides track by slide.id" index="slide.id">
  <img ng-src="{{slide.image}}" style="margin:auto;">
  <div class="carousel-caption">
    <h4>{{slide.text}}</h4>
  </div>      
</uib-slide>

你的电话网站是这样的：

<div style="height: 305px">
    <uib-carousel active="carousel.active" 
        interval="carousel.myInterval" no-wrap="carousel.noWrapSlides" 
        ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" 
        ng-swipe-right="prev()" ng-swipe-left="next()"></uib-carousel>
</div>

如果在此之后仍然出现错误，我希望您的幻灯片控制器也使用替换它自己的模板。

Answer 2

问题在于你在使用gulp（或类似的构建系统）时有意或无意地声明了carousel指令两次。可能会发生这种情况，因为当您将carousel指令重新构建到其他文件夹时，从/ tmp或/ dist文件夹构建/提供代码的gulp系统仍然使用之前构建的旧carousel指令，同时还会生成新的carousel指令新的重组文件夹。

解决方案很简单。只需删除你的tmp或dist文件夹，然后运行你的gulp即可生成一份提供给浏览器的新文件副本。

AngularJs要求模板

2 个答案: