javascript - 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>

带有数组值的 Controller

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

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

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

Answer 1

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

我使用 ng-show 来管理何时需要显示 slider ，因为 slider 最初被隐藏并出现问题。

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

在这里发现差异:what is the difference between ng-if and ng-show/ng-hide