如果稍后显示，bxslider bx-viewport 高度为 0

Question

我有一个 angular 应用程序，我在其中使用了 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 我需要稍微调整 [=32] =]让bxslider得到需要的高度。

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

Answer 1

问题是 - Slides/images 必须在滑块启动之前可见。

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

或者：

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

重新加载 bx 滑块文档 -

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?

Answer 2

感谢小伙伴们的支持。我找到了答案。

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

但现在我切换到 ng-if 这不仅仅是隐藏滑块或将其从 DOM 中完全删除并在我需要时插入它以便 bxslider 仅在显示时初始化并且工作得很好。

在这里找到了不同之处：what is the difference between ng-if and ng-show/ng-hide

如果稍后显示，bxslider bx-viewport 高度为 0

bxslider bx-viewport height is 0 if shown later

html

javascript

jquery

bxslider

angularjs

重新加载 bx 滑块文档 -

ng-show 完成时触发事件