Question

我正在构建一个Angular应用程序，它利用https://github.com/bespokejs/bespoke演示插件来创建动态幻灯片。我的幻灯片来自生成HTML的ng-repeat。我的问题在于，根据ng-repeat读取的数组的长度，我的幻灯片被实例化，期望有更多的幻灯片。

例如，如果我在一个包含ng-repeat的12个项目的数组上实例化了牌组，然后用6个项目的数组再次打到pinActiveCategory()，则牌组仍然认为有12个幻灯片，即使它只会填充6，创建一个丑陋的场景，我的用户在空幻灯片中循环。

我的观点：

<div id="left" ng-class="butterfly">
<div id="carousel">
<article>
<section ng-repeat="carousel in theminiBreadsList">
<img ng-src="img/{{carousel.type|lowercase|nospace}}big.jpg">
<p class="breadDescribe"><span class="buttons"><i ng-click="pinActiveBread($event,carousel.text)" class="fa fa-arrows-alt"></i><i ng-click="initiateCart()" class="fa fa-cart-plus"></i><i class="fa fa-question"></i></span><span class="carousel-text"><u>{{carousel.text}}</u></span></p></section>
</article>
</div>
</div>

我的控制器：

    $scope.pinActiveCategory = function($event, category) {
  $scope.show.push('show');
  for (var i = 0; i < $scope.theBreadsList.length; i++) {
    if ($scope.theBreadsList[i].category == category) {
      $scope.theminiBreadsList = angular.copy($scope.theBreadsList[i].breads);
      $scope.butterfly.push("show");
      $scope.$watch("theminiBreadsList", function(newValue, oldValue) {
        var butterfly = function() {
          $timeout(function() {
            $(".bespoke-active img").css("transform", "scale(1.0)");
            $(".bespoke-before img").css("transform", "scale(1.1)");
            $(".bespoke-after img").css("transform", "scale(1.1)");
            $scope.theActiveLoaf = $(".bespoke-active .carousel-text").text();

            function isDaily(nameKey, myArray) {
              for (var i = 0; i < myArray.length; i++) {
                for (var z = 0; z < myArray[i].breads.length; z++) {
                  if (myArray[i].breads[z].text === nameKey) {
                    $scope.isTheActiveBreadDaily = myArray[i].breads[z].isDaily;
                  }
                }
              }
            }
            isDaily($scope.theActiveLoaf, $scope.theBreadsList);
          }, 999);
        };
        var deck = bespoke.horizontal.from('#carousel article', {
          fx: {
            direction: "horizontal",
            transition: "carousel"
          }
        });
        butterfly();
        deck.on('activate', function(event) {
          butterfly();
        });
      });
    }
  }
},

我知道问题与bespoke命令运行时有关，当使用新的theminiBreadsList更新范围时，我只是不知道如何解决它。我尝试移动启动幻灯片的代码块，但是没有做任何有用的事情，我最终打破了更多的东西而不是修复任何东西，所以我正在寻找另一组眼睛来寻求帮助，谢谢！

编辑：基本上我正在寻找一个答案，帮助我在正确的时间调用牌组变量（开始幻灯片），以便它知道有多少节元素，因此知道应该有多少张幻灯片。

角度范围观察问题导致范围问题

0 个答案: