问题描述
我使用这些包:
从角ui包的angularjs模式:http://angular-ui.github.io/bootstrap/#/modal
从这里角flexslider:<一href=\"https://github.com/Enthusiastic$c$c/angular-flexslider\">https://github.com/Enthusiastic$c$c/angular-flexslider
当他们在不同的页面每一个插件工作良好。但是当我在一个页面中使用它们,角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>
和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 ...) });
}]);
该controller.js文件是:
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.
更新: HTML不必要的加价去掉,controller.js和app.js内容加入
UPDATE: unnecessary html markups removed, controller.js and app.js contents added.
推荐答案
名为幻灯片
A指令看起来是既角flexslider
和 ui.bootstrap.carousel
。如果你不需要旋转木马,请尝试AngularUI引导的生成无转盘的支持。
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.
看起来棱角分明使用的是自举幻灯片
而不是flexslider 幻灯片
和引导1需要transclusion其中也是由柔性滑块
要求,所以有冲突,因为哪一个获得precedence。
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.
这篇关于AngularJS错误 - [$编译:multidir]多个指令错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!