Question

我遇到了一些问题（呃......否则我不会在这里）。我已经用自己的力量搜索了一下，无法弄清楚它为什么不起作用。我已经尝试了很多东西，所以要抓紧并准备好很多代码块。

目前看起来如何：

How it looks at the moment:

这是我的bxslider的代码：

<ul class="bx-slider" bx-slider>
    <li class="slide frame fluid image" ng-repeat="img in sliderImages track by $index" notify-when-repeat-finished width="400px" height="225px">
         <a id="reload-slider" class="huge red corner label" ng-click="deleteItem($index)">
             <i class="remove icon"></i>
         </a>
         <img class="image centered" ng-src="../{{img}}"/>
     </li>
 </ul>

正如您可能猜到的那样，我已将jquery插件转换为指令，并且还在ng-repeat完成时制作了广播指令：

BxSlider指令：

module.directive('bxSlider', [function () {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        //console.log(element);
        scope.$on('repeatFinished', function () {
            console.log("ngRepeat has finished");
            element.bxSlider().bxSlider(scope.$eval('{' + attrs.bxSlider + '}'));
        });
        scope.$on('reload-slider', function() {
            console.log("TEXTS!");
            element.reloadSlider();
        });
    }
}
}]);

Ng-Repeat完成指令：

module.directive('notifyWhenRepeatFinished', ['$timeout', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('repeatFinished');
            });
        }
    }
}
}]);

单击右上角的十字形时，将通过此功能删除图像：

删除图片功能

 $scope.deleteItem = function(index){
    alert('deleting item: ' + $scope.sliderImages[index]);
    $http({method: 'POST', url: '/guta/API/slides/'+ index}).then(function(result) {
        console.log("Okay.. I finished the post.");
        console.log("Slider images old:", $scope.sliderImages);

        $scope.sliderImages.splice(index, 1);
        console.log("Slider images new:", $scope.sliderImages);
        $scope.$broadcast('reload-slider');
    });
};

正如您所看到的，我尝试将reload-slider广播到指令并让元素重新加载。据我所知，广播应该触发

scope.$on('reload-slider', function(){...}

问题：

console.log可以工作，但它根本不重新加载滑块，图像数组不会重新循环，什么也不重新。它唯一能做的就是记录＆＃34; TEXTS＆＃34;并将文件丢弃在服务器上（应该如此）

它不应该在删除后显示图像

感谢任何帮助，修复或想法。

Answer 1

所以，一位同事帮助我解决了问题，这是工作位。

BoxSlider本身：

<ul class="bx-slider" bx-slider="mode: 'horizontal', controls:false">
    <li class="slide frame fluid image" ng-repeat="img in sliderImages|ngRepeatFinish) track by $index" width="400px" height="225px">
        <a id="reload-slider" class="huge red corner label" ng-click="deleteItem($index)">
            <i class="remove icon"></i>
        </a>
        <img class="image centered" ng-src="../{{img}}"/>
    </li>
</ul>

指令：

module.directive('bxSlider', ['$rootScope',function ($rootScope) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var slider = element;
        $rootScope.$on('ngRepeatFinished', function() {
            console.log("repeat finished!!");
            console.log(element);
            if(element.reloadSlider){
                element.reloadSlider();
            }
            else{
                element.bxSlider().bxSlider(scope.$eval('{' + attrs.bxSlider + '}'));
            }

        });
    }
}
}]);

ng-repeat完成后，此过滤器将调用

module.filter('ngRepeatFinish', function($timeout, $rootScope){
return function(data){
    var me = this;
    var flagProperty = '__finishedRendering__';
    if(!data[flagProperty]){
        Object.defineProperty(
            data,
            flagProperty,
            {enumerable:false, configurable:true, writable: false, value:{}});
        $timeout(function(){
            delete data[flagProperty];
            $rootScope.$broadcast('ngRepeatFinished');
        },0,false);
    }
    return data;
};
});

单击十字时控制器中调用的函数：

$scope.deleteItem = function(index){
    alert('deleting item: ' + $scope.sliderImages[index]);
    $http({method: 'POST', url: '/guta/API/slides/'+ index}).then(function(result) {
        $scope.sliderImages.splice(index, 1);
    });

};

因此，我将尝试解释代码运行的顺序：

bxSlider在循环结束后加载（通过过滤器上的Broadcast来学习）
用户点击他/她想要删除的图片角落的十字架
将跟踪每个图像的$ index发送到将带有删除请求的图像URL发布到服务器的函数
要删除的图像将从服务器中删除，而前端使用splice（）删除图像（不需要再次请求它）
（我认为）因为ng-repeat的数组已更改，它会再次运行。
完成ng-repeat后，过滤器再次调用。
因为函数element.reloadSlider是可用的（未定义），所以它调用element.reloadSlider（）; INSTEAD重新初始化整个boxslider，这将导致丑陋的bxslider。

如果你仔细看看bx-slider属性，你会发现有两个传递的配置选项（bx-slider="mode: 'horizontal', controls:false"），尤其是控制：false很重要，这可以防止每个图像都有自己的一组prev和下一个按钮，但只允许bx滑块本身具有那些

我希望这可以帮助人们自己坚持使用角度bx滑块。

在将图像移除或添加到集合后，无法使bxslider正确重新加载

1 个答案: