javascript - Angular 无法使用模板渲染轮播

Question

我将 Angular 与 UI Bootstrap 组件一起使用。我的目标是使用 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>

Controller

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 carousel 的属性不应以这种方式使用。如果您想将自己的 HTML 用于幻灯片放映控件，您应该只覆盖默认轮播模板。这是 default carousel template仅供引用。

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