Angular cannot render carousel with template

Question

I am using Angular with UI bootstrap components. My goal was to create carousel using templateUrl argument for slide render, but met some problems. First of all nothing appears when I run page, also I get tho errors:

https://docs.angularjs.org/error/$compile/ctreq?p0=carousel&p1=slide
Multiple directives [carousel, slide (module: ui.bootstrap.carousel)] asking for transclusion on:

Here is my code: home.html

<section id="slider">
<!--slider-->
<div class="container">
    <div class="row" ng-controller="homeCarouselCtrl">
        <div class="col-sm-12">
            <carousel interval="myInterval" no-wrap="noWrapSlides"  template-url="pages/templates/offer-product-tplt.html"/>
        </div>
    </div>
</div>

controler

mainApp.controller('homeCarouselCtrl', ['$scope', function ($scope)
{
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.slides = [
        {
            slideTitle: 'Free E-Commerce Template',
            slideText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            slideImage: '../../images/home/cat1.jpg'
        },
        {
            slideTitle: '100% Responsive Design',
            slideText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            slideImage: '../../images/home/cat2.jpg'
        },
        {
            slideTitle: 'Free Ecommerce Template',
            slideText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            slideImage: '../../images/home/cat3.jpg'
        }

    ];
}]);

template: offer-product-tplt.html

   <slide ng-repeat="slide in slides" active="slide.active">
    <div class="col-sm-6">
        <h1><span>E</span>-SHOPPER</h1>
        <h2>{{slide.slideTitle}}</h2>
        <p>{{slide.slideText}}</p>
        <button type="button" class="btn btn-default get">Get it now</button>
    </div>
    <div class="col-sm-6">
        <img src="../../images/home/girl1.jpg" class="girl img-responsive" alt="" />
        <img src="../../images/home/pricing.png" class="pricing" alt="" />
    </div>
   </slide>

Maybe someone can show me where I made mistake?

Have you tried using your template directly in your HTML instead of using template-url? Also, your <slide> element never closes. — Anid Monsur
– Anid Monsur, Commented Aug 30, 2015 at 20:41
it closes, just bad copy paste. I tried to make this egzample, everthing works. angular-ui.github.io/bootstrap/#carousel — Edgar
– Edgar, Commented Aug 30, 2015 at 20:45

Anid Monsur · Accepted Answer · 2015-08-30 21:33:32Z

1

The templateUrl attribute for carousel shouldn't be used in this manner. You should only override the default carousel template if you want to use your own HTML for slideshow controls. Here's the default carousel template FYI.

You'll need to move your <slide> into the <carousel>. If you want a reusable template for what's inside the slide, you could create a directive for that.

answered Aug 30, 2015 at 21:33

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular cannot render carousel with template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related