Question

我有一个角度应用程序，我正在使用bxslider插件。

我创建了bxslider指令来调用插件，一切正常，直到我扩展了功能。

这是创建指令

的代码

angular.module('sbAdminApp')
.directive('bxSlider', function(){
    return{
        restrict: "A",
        require: "ngModel",
        link: function(scope, element, attrs, ctrl){
            element.ready(function(){
                $($(element[0])).bxSlider({
                    controls:false,
                    pager:true,
                    maxSlides: 1,
                    minSlides:1
                });
            })
        }
    }
})

这是html

<div class="banner_section" ng-model="bannerSlider" bx-slider>
    <div class="slide" ng-repeat="banner in mobileBanner track by $index">
        <img ng-src="images/{{banner}}">
    </div>
</div>

控制器，其值为数组

angular.module('sbAdminApp')
.controller('mobileViewCtrl', function($scope){
    $scope.mobileBanner = ['banner_small.png', 'banner_small.png', 'banner_small.png'];
})

但实际上滑块div是隐藏的，我在点击锚时用ng-show显示它，因为bxslider的高度为0我需要稍微调整窗口大小以让bxslider获得所需的高度。

我希望bxslider在我显示div时最初应该是正确的。

Answer 1

感谢所有支持你的队友。我找到了答案。

当我需要显示滑块时，我正在使用ng-show进行管理，因为滑块最初被隐藏并出现问题。

但现在我切换到ng-if，这不只是隐藏滑块或完全将其从DOM中移除并在我需要时插入它，以便bxslider仅在显示并且工作完全正常时初始化。< / p>

在此找到差异：what is the difference between ng-if and ng-show/ng-hide

Answer 2

问题在于 - 在启动滑块之前，幻灯片/图像必须可见。

在您的情况下，可能的解决方案是 -

<强>或者：

您可以在ng-show动画完成后重新加载滑块
滑动可以在ng-show动画完成后启动

要重新加载bx滑块doc -

http://bxslider.com/examples/reload-slider

http://bxslider.com/examples/reload-slider-settings

示例代码：

var slider = $('.bxslider').bxSlider({
  mode: 'horizontal'
});
//Inside ng-show callback
slider.reloadSlider();

ng-show完成时的触发事件

Call a function when ng-show is triggered?

如果稍后显示，则bxslider bx-viewport height为0

2 个答案:

要重新加载bx滑块doc -

ng-show完成时的触发事件