Question

我正在使用Angular和UI引导程序组件。我的目标是使用templateUrl参数为幻灯片渲染创建轮播，但遇到了一些问题。首先，当我运行页面时没有任何内容出现，我也得到了错误：

https://docs.angularjs.org/error/$compile/ctreq?p0=carousel&p1=slide
多个指令[carousel，slide（module：ui.bootstrap.carousel）]要求进行翻译：

这是我的代码：的 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'
        }

    ];
}]);

模板：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>

也许有人可以告诉我哪里出错了？

Answer 1

轮播的templateUrl属性不应以这种方式使用。如果要将自己的HTML用于幻灯片控件，则应仅覆盖默认轮播模板。这是default carousel template FYI。

您需要将<slide>移至<carousel>。如果您想要一个可重复使用的模板来处理幻灯片中的内容，您可以为此创建一个指令。

Angular无法使用模板渲染轮播

1 个答案: