如何在angular.js的ng-click上重建猫头鹰旋转木马

Question

我面临一些严重的问题，我在angular.js中使用了owl carousel。它第一次工作很好。后来我有一个按钮在同一页上，我想重建猫头鹰旋转木马上的特定按钮与新数据。这是我的控制器和HTML代码。

.directive('riskcarousel', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                var syncPosition = function (event) {
                    var nav = this;
                    var body = $('#risk_body').data('owlCarousel');
                    $timeout(function () {
                        body.to(nav._current);
                        scope.setPhaBackgroundColor(nav._current);
                    }, 1000);
                };
                //console.log(owlCarousel,"Smartdata");
                var owl = $(element.parent()).owlCarousel({
                    items: 3,
                    nav: false,
                    dots: false,
                    center: true,
                    responsive: {
                        0: {
                            items: 3,
                            nav: false
                        },
                        600: {
                            items: 3,
                            nav: false
                        },
                        1000: {
                            items: 3,
                            nav: false
                        }
                    },
                    onDragged: syncPosition
                });
                //owl.data().owlCarousel.addItem('<a class="item link center-owl-item" style="background-color: transparent;"></a>', owl.data().owlCarousel.num.items - 1);
                //owl.data().owlCarousel.addItem('<a class="item link center-owl-item" style="background-color: transparent;"></a>', owl.data().owlCarousel.num.items - 1);
                //owl.data().owlCarousel.reset(owl.data().owlCarousel.num.items-1);
                $timeout(function () {
                    owl.data().owlCarousel.to(0);
                    //owl.data().owlCarousel.removeItem(owl.data().owlCarousel.num.items-1);
                    //owl.data().owlCarousel.removeItem(owl.data().owlCarousel.num.items-1);
                }, 10);
            }
            element.on('click', function () {
                //$('.owl-item').removeClass('selected-item');
                //element.parent().addClass('selected-item');
                alert('hello');
                var index = element.attr('data-index');
                var nav = $('#risk_nav').data('owlCarousel');
                var body = $('#risk_body').data('owlCarousel');
                $timeout(function () {
                    nav.to(index);
                    body.to(index);
                    scope.setPhaBackgroundColor(index);
                }, 10);
            });
        }
    }
})
.directive('riskCarouselBody', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                var syncPosition = function (event) {
                    var nav = $('#risk_nav').data('owlCarousel');
                    var body = this;
                    $timeout(function () {
                        nav.to(body._current);
                        scope.setPhaBackgroundColor(body._current);
                    }, 10);
                };
                var owl = $(element.parent()).owlCarousel({
                    items: 1,
                    nav: false,
                    dots: false,
                    responsive: {
                        0: {
                            items: 1,
                            nav: false
                        },
                        600: {
                            items: 1,
                            nav: false
                        },
                        1000: {
                            items: 1,
                            nav: false
                        }
                    },
                    onDragged: syncPosition
                });
            }
        }
    }
})

Html代码

<div ng-repeat="s_disease in sub_diseases"
             style="float: left; border-radius: 50%; height: 50px; width: 50px; margin: 2px;"
             ng-class="[s_disease.background , s_disease.class, 'sub_diseases_clicked']">
            <img ng-src="http://localhost:3000/uploads/{{s_disease.icon}}" style="width: 50px; height: 50px"
              ng-click="getSubDiseasesPHA(s_disease.id) ">
        </div>
    </div>
    <div class="pha-carousel">
        <div class="pha-back">
            <a class="carousel-icon" href="#/qsummary"><i class="ion-chevron-left"
                                                          style="color: rgba(255, 255, 255, 1);"></i></a>
        </div>
        <div class="owl-carousel" id="risk_nav">
            <a class="item link center-owl-item" data-index="{{$index}}" ng-repeat="pha in phas"
               ng-class="[pha.background, pha.class]"
               ng-style="pha.key_string=='qscore' && {'background-color': pha.background}"
               riskcarousel><h1 style="white-space:normal !important;">{{pha.health_area}}</h1></a>
        </div>
    </div>

Answer 1

我创建了一个carousel初始化函数，并在控制器初始化时调用

$scope.initializeCaraousel = function () {
        //Check if already carousel made then destroy
        if (typeof $("#sync1").data('owlCarousel') != 'undefined') {
            $("#sync1").data('owlCarousel').destroy();
           $('#sync2').data('owlCarousel').destroy();
        }
        var sync1 = $("#sync1");
        var sync2 = $("#sync2");
        sync1.owlCarousel({
            singleItem : true,
            slideSpeed : 1000,
            navigation: true,
            pagination:false,
            afterAction : syncPosition,
            responsiveRefreshRate : 200
        });
        sync2.owlCarousel({
            items : 3,
            itemsDesktop      : [1199,10],
            itemsDesktopSmall : [979,10],
            itemsTablet       : [768,8],
            itemsMobile       : [479,4],
            pagination:false,
            responsiveRefreshRate : 100,
            afterInit : function(el){
                el.find(".owl-item").eq(0).addClass("synced");
            }
        });
        function syncPosition(el){
            var current = this.currentItem;
            console.log(current);
            $("#sync2")
                .find(".owl-item")
                .removeClass("synced")
                .eq(current)
                .addClass("synced")
            if($("#sync2").data("owlCarousel") !== undefined){
                center(current)
            }
            // code for smooth transition
            this.owl.owlItems.removeClass('smooth-slide');
            $(this.owl.owlItems[this.owl.currentItem]).addClass('smooth-slide');
        }
        $("#sync2").on("click", ".owl-item", function(e){
           // e.preventDefault();
            var id = $(this).attr("id");
            //console.log(id);
            var index = parseInt(e.target.id);
            //console.log(index);
       sync1.trigger("owl.goTo", index);
        });
        function center(number){
            var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
            var num = number;
            var found = false;
            for(var i in sync2visible){
                if(num === sync2visible[i]){
                    var found = true;
                }
            }
            if(found===false){
                if(num>sync2visible[sync2visible.length-1]){
                    sync2.trigger("owl.goTo", num - sync2visible.length+2)
                }else{
                    if(num - 1 === -1){
                        num = 0;
                    }
                    sync2.trigger("owl.goTo", num);
                }
            } else if(num === sync2visible[sync2visible.length-1]){
                sync2.trigger("owl.goTo", sync2visible[1])
            } else if(num === sync2visible[0]){
                sync2.trigger("owl.goTo", num-1)
            }
        }
    }