Question

我试图在我的costum指令中使用uib-carousel指令。用于测试的图像使用ng-repeat进行渲染，但不存在旋转木马组件。 uib-carousel和uib-slide属性被忽略，为什么？我没有注入ui.bootstrap模块，因为在我的情况下它应该由grunt完成，如果我尝试注入它，无论如何它会给我一个注入错误。我正在使用grunt来运行客户端。

这是我的示例模块：

<div ng-controller="LifeCarouselExampleController as vm">
<life-carousel interval="vm.interval" images="vm.images">
</life-carousel>

angular.module('cgm.life.components.lifeCarousel.example', ['cgm.life.components.lifeCarousel'])
    .controller('LifeCarouselExampleController', LifeCarouselExampleController);

function LifeCarouselExampleController() {
    var vm = this;
    vm.images = ['src/toolbox/components/lifeCarousel/example/img/stomato1.jpg', 'src/toolbox/components/lifeCarousel/example/img/stomato2.jpg', 'src/toolbox/components/lifeCarousel/example/img/stomato3.jpg'];
    vm.interval = 4;
}

这是我的自定义指令模块：

angular
    .module('cgm.life.components.lifeCarousel', [])
    .directive('lifeCarousel', LifeCarouselFactory);

//lifeCarousel.$inject = ['$timeout', 'screenSizeService', '$rootScope'];

/* @ngInject */
//LifeCarouselFactory.$inject = ['$compile'];
function LifeCarouselFactory() {
    return {
        restrict: 'E',
       // require: 'ngModel',
        //transclude: true,
        templateUrl: 'life_Carousel.html',
        scope: {
            interval: '=',
            images: '='
        },
        link: link
    };

    function link(scope) {
        var Carousel = {
            setSlides: function () {
                for (var i = 0; i < scope.images.length; i++) {
                    var slide =
                    {
                        image: scope.images[i], text: 'img_' + i, id: i
                    };
                    scope.slides.push(slide);
                }
            }
        };
        scope.slides = [];
        Carousel.setSlides();
        scope.carouselId = Math.floor((Math.random() * 1000000000000000) + 1);
        scope.noWrapSlides = false;
        scope.active = 0;
    }

}

自定义指令的模板：

<div style="width:75%; margin-left: 11.5%">
<div uib-carousel id="{{carouselId}}" active="{{active}}" interval="{{interval}}" noWrapSlides="{{noWrapSlides}}"
              style="max-width: 80%; margin-left: 10%">
    <div uib-slide ng-repeat="slide in slides track by slide.id" index="$index">
        <img ng-src="{{slide.image}}" style="max-height: 400px; min-width: 100%; margin: 0 auto;">
    </div>
</div>

如何在自定义指令中使用ui bootstrap指令？

0 个答案: