Question

任何人都可以查看我的代码？它使用ui-bootstrap轮播组件。当我试图点击其中一个按钮时，它会更新要显示的幻灯片，因此只有部分幻灯片会显示在旋转木马中...问题是我无法看到旋转木马有时（并非总是）...尝试一下......任何人都可以告诉我为什么？以及如何解决这个问题？

我的代码位于：http://plnkr.co/edit/Qp8axH

html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- Le styles -->
  <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <style>
    body {
      padding-top: 60px;
    }
    @media (max-width: 979px) {
      /* Remove any padding from the body */
      body {
        padding-top: 0;
      }
    }
  </style>
  <link href="style.css" rel="stylesheet" />
  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <!-- Le fav and touch icons -->
  <link rel="shortcut icon" href="images/favicon.ico" />
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
  <!-- Le javascript
    ================================================== -->
  <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="CarouselLeftCtrl" class="col-xs-6 col-md-6 shopper-left">
    <div style="position:relative;clear:both">
      <ul class="shopper-categories" style="list-style-type: none; float:left; padding-left:0">
        <li><a data-category='cute' ng-click='emitCategoryInfo($event)' class="depstore btn btn-border" style="margin-bottom:5px; padding-left:0">Cute</a>
        </li>
        <li><a data-category='supercute' ng-click='emitCategoryInfo($event)' class="boutique btn btn-border" style="margin-bottom:5px; padding-left:0">Super Cute</a>
        </li>
      </ul>
    </div>
    <div style="clear:both">
      ======
    </div>
    <div class="col-md-1">clicks {{slides | json}}</div>
    <div>
      ======
    </div>
    <div class="col-md-6 left-carousel">
      <div>
        <div style="height: 150px">
          <carousel interval="myInterval">
            <slide ng-repeat="slide in slides" active="slide.active">
              <img ng-src="{{slide.image}}" style="margin:auto;">
            </slide>
          </carousel>
        </div>
      </div>
    </div>
  </div>
  <!-- /container -->
</body>

</html>

JS：

/

/ Add your javascript here
var CarouselLeftCtrl, CarouselRightCtrl, app;

app = angular.module("app", ["ui.bootstrap"]);


CarouselLeftCtrl = function($scope, $http, $log, $timeout) {
  $scope.myInterval = -1;
  $scope.slides = [];
  $scope.json = 0;

  $http.get("shopper_images.json").then(function(result) {
    var d = result.data;
    for (var i = 0; i < d.length; i++) {
      $scope.slides.push({
        image: d[i].image,
        category: d[i].category
      });
    }
    $scope.allSlides = $scope.slides;
  });

  $scope.$on("category", function(event, data) {
      $scope.clicks +=1;
      var slides = $scope.allSlides;
      var result = [];
      for (var i = 0; i < slides.length; i++) {
        if(slides[i].category === data.category) {
          result.push(slides[i]);
        }
      }
      $scope.slides = result;
      $scope.slides[0].active = true;
      $scope.$apply();
  });

  $scope.emitCategoryInfo = function($event) {
      $scope.$emit("category", {
        category: angular.element($event.target)[0].dataset.category
      });
  };

};

JSON：

[

{
    "image": "http://placekitten.com/601/300", "category": "cute"
},
{
    "image": "http://placekitten.com/602/300", "category": "supercute"
},
{
    "image": "http://placekitten.com/603/300", "category": "cute"
}

AngularJS UI Bootstrap轮播组件未随模型更改而更新

0 个答案: