私はこれらのパッケージを使用します: angular-ui パッケージの angularjs モーダル: http://angular-ui.github.io/bootstrap/#/modal ここからの Angular-flexslider: https://github.com/EnthusiasticCode/angular-フレックススライダー
すべてのプラグインは、別々のページにある場合にうまく機能します。しかし、1 つのページでそれらを使用すると、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 の内容が追加されました。