CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui-bootstrap
Ritesh Kashyap
Ritesh Kashyap

Reputation: 394

ng-class or ng-style directive not working in ui bootstrap carousel

I am using UI Bootstrap Carousel and need to do some customization in it so that user have access of configuring options such as text color, navigation show/hide, etc....

For this i have used their carousel html template and added some ng-class for display block/none and some other ng-style but those are not working and do not have any effect over the same.

These are working fine if i am using the same on page where carousel markup written.

Refer to plunker to replicate issue

Carousel Plunker

Template HTML

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
    <div class="carousel-inner" ng-transclude></div>
    <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1" ng-class="{'dispNone': carousel.arrow}">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">previous</span>
    </a>
    <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1" ng-class="{'dispNone': carousel.arrow}">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">next</span>
    </a>
    <ol class="carousel-indicators" ng-show="slides.length > 1">
        <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
            <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
        </li>
    </ol>
</div>

Upvotes: 1

Views: 463

Answers (1)

eesdil
eesdil

Reputation: 2021

You can use $parent in the template as you are having different scopes. Like

$parent.navArrow

Upvotes: 1

Related Questions