Multiple directives asking for new/isolated scope

[Cosmitar]

Since I installed angularjs version 1.2.1, an error raises when Angular processes the Carousel directive.

Error: [$compile:multidir] Multiple directives [carousel, carousel] asking for new/isolated scope.

Looks like the name "carousel" for the directive is conflictive with another variable. I've changed the name of the directive by myCarousel (HTML: data-my-carousel) and that solved the error.

Best!

[brauliodiez]

Take a look at this:
http://stackoverflow.com/questions/21073295/angularjs-multiple-directives-asking-for-isolated-scope-on

And:

http://docs.angularjs.org/error/$compile/multidir?p0=capital&p1=country&p2=new%2Fisolated%20scope&p3=%3Cdiv%20country%3D%22Russia%22%20capital%3D%22Moscow%22%3E

[mbutterfield]

Actually, the original author, Cosmitar, is correct; the name "carousel" conflicts with another directive (I believe bootstrap UI). His solution is correct. I went back and verified the problem. I'm betting that Cosmitar had a dependency on 'ui.bootstrap' in his module declaration or possibly in a module that created a $modal that used the carousel directive.

So if I had say...

angular.module('myModule', ['swipeModule', 'angular-gestures', 'FundooCarouselApp', 'ui.bootstrap']);

angular.module('myModule').controller('myController', function ($scope, $modal) {
console.info('controller loaded');

$scope.startModal = function () {
    var modalInstance = $modal.open({
        templateUrl: 'AngularJS_Carousel.html',
        controller: '',
        resolve: {
        },
        transclude: 'true'
    });

    modalInstance.result.then(function () {
        //$scope.selected = selectedItem;
    }, function () {
        console.info('Modal dismissed at: ' + new Date());
    });
};

});

And my HTML looked like this

<div ng-controller="MainCtrl" style="background-color: #eee; font-size:18px">
    <div class="photo-container" data-carousel data-carousel-class="photo-carousel" data-on-page-upcoming="loadPage(page, tmplCb)" data-give-carousel-to="onCarouselAvailable(carousel)">
        <div class="photo-grid span12">
            <span data-ng-repeat="photo in photos">
                <img ng-src="{{photo}}" hm-swipe="swipe($event)" hm-pinch="pinch($event)">
            </span>
        </div>
    </div>
    <a style="float: left;" data-ng-show="hasPrevious()" data-ng-click="previous()">&lt;&lt; Previous</a>
    <span style="float: left;" data-ng-hide="hasPrevious()">&lt;&lt; Previous</span>
    <a style="float: left;" data-ng-show="hasNext()" data-ng-click="next()">Next &gt;&gt;</a>
    <span style="float: left;" data-ng-hide="hasNext()">Next &gt;&gt;</span>
    <script src="carousel.js"></script>
    <script src="AngularJS_CarouselCtrl.js"></script>
    <script src="gestures.min.js"></script>
</div>

I would get the error he describes. Removing 'ui.bootstrap' or renaming, if needed, "carousel" (in the .html and carousel.js - look for directive) would fix the problem.

Had to come back and edit my response. You cannot remove 'ui.bootstrap' since it would undefine $modal. Looks like you gotta rename carousel. I did try adding the dependency as 'ui.bootstrap.modal' but then some other stuff was not defined.

For whatever it's worth, I believe the old $dialog worked, but going back to that old version just creates its own issues.

Hope this helps. Any chance Fundoo that you could rename your directive?

Thanks Fundoo; good stuff!