AngularJs请求模板的多个指令
我使用旋转木马角ui引导程序作为指令，但遇到了以下问题：
错误：$compile:multidir多指令旋转木马、旋转木马(模块: myApp.common)请求模板在：
<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">上
这就是说，我在同一个DOM元素上使用了许多指令，这是不正确的。我已经将它签入了一个空白页，但仍然显示了错误消息。
我在用：
- “角”："^1.5.0“
- “角-动画”："^1.5.0"，
- “角-用户界面-引导”："^0.14.3"，
检查下面的代码: 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>任何想法都是非常感谢的。谢谢!
回答 2
Stack Overflow用户
发布于 2016-12-20 04:09:44
问题在于，当您使用gulp (或类似的构建系统)时，您已经两次声明了carousel指令，要么是有意的，要么是无意的。之所以会发生这种情况，是因为当您将旋转木马指令重组到其他文件夹时，从/tmp或/dist文件夹构建/服务代码的gulp系统仍然使用以前版本中的旧旋转木马指令，同时还从新重构的文件夹中生成新的旋转木马指令。
解决办法很简单。只需移除tmp或dist文件夹，然后运行gulp以生成新的文件副本，该副本提供给浏览器。
Stack Overflow用户
发布于 2016-06-10 08:24:33
这是指令之间的交互。基于消息(多个指令carousel，carousel (模块: myApp.common))，我认为最有可能的原因是templateUrl。
您的HTML包含uib-旋转木马，但随后用作旋转木马指令的模板。因此，您正在递归地将旋转木马包含在其内部。每个嵌套的都试图替换调用站点中的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>如果您在这之后仍然得到错误，我希望您的幻灯片控制器也使用替换作为自己的模板。
https://stackoverflow.com/questions/37698356
复制相似问题
腾讯云开发者
