角度转盘并不总是在幻灯片更改时更新

Angular-carousel is not always updated on slides change

本文关键字：幻灯片 更新      更新时间：2023-09-26

我是AngularJS的新手，非常感谢您的建议。我有带图像的滑块：

 <ul rn-carousel rn-carousel-index="carouselIndex"  rn-carousel-buffered>
            <li ng-repeat="slide in slides track by slide.id" ng-class="'id-' + slide.id">
                <div ng-style="{'background-image': 'url(' + slide.image + ')'}"  class="bgimage">
                </div>
            </li>
        </ul>

在我的控制器中，我为$scope.slides分配了一些图像阵列：

$scope.slides = [];
$.each(defaultImages,function(i, element)
       {
          var slide = {
            image://...
          };
          $scope.slides.push(slide);
       });

此外，我还有一个改变幻灯片阵列的功能：

$scope.colorClicked = function ($index, color_id) {
    //...
    $scope.slides = [];
    $.each(images,function(i, element)  
       {
          var slide = {
           image:/...
          };
          $scope.slides.push(slide);
       });
  }

我有两个问题：

1） 它工作得很好，但有时当我的colorClicked函数启动时，当前显示在滑块上的图像不会改变。

我想知道我应该以某种方式更新滑块还是范围？我在函数中尝试了$scope.$apply()，但没有帮助。

2） 即使我将数组传递给幻灯片集合，我的控制台中也会出现错误：Error: the slides collection must be an Array，尽管我的滑块工作得很好。

Soluction error'错误：幻灯片集合必须是Array at error（原生）角度旋转木马。min.js:8'

//Controller
$scope.banners = [];
Banners.getListBanners().then(function (banners) {
    $scope.banners = banners;
});
//view
<ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slide" ng-show="banners.length > 0">
            <li ng-repeat="banner in banners">
                <p ng-bind-html="banner.title | to_trusted"></p>
                <img ng-if="isBlank(banner.link)" ng-src="{{banner.img}}" alt="{{banner.title | to_trusted}}">
                <a ng-if="!isBlank(banner.link)" ng-click="openInExternalBrowser(banner.link, banner.type)" href="#">
                    <img ng-src="{{banner.img}}" alt="{{banner.title | to_trusted}}">
                </a>
            </li>
        </ul>
相关文章：