我使用这些包：来自 angular-ui 包的 angularjs modal：http ://angular-ui.github.io/bootstrap/#/modal 和来自这里的 Angular-flexslider：https ://github.com/EnthusiasticCode/angular-弹性滑块
每个插件在单独的页面中都可以正常工作。但是当我在一页中使用它们时，angular-flexslider 会导致错误：
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 ...
模板文件是这样的：
<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 文件是：
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');
};
};
我该如何解决？告诉我是否需要更多信息。谢谢。
更新：删除了不必要的 html 标记，添加了 controller.js 和 app.js 内容。