Question

我在html中使用以下标记：

<div style="height: 305px">
  <div uib-carousel active="false" interval="50000" no-wrap="true">
    <div uib-slide ng-repeat="slide in shoes track by slide._id" index="slide._id">
      <img ng-src="{{slide.image}}" style="margin:auto;">
      <div class="carousel-caption">
        <h4>Slide {{slide._id}}</h4>
        <p>{{slide.text}}</p>
      </div>
    </div>
  </div>
</div>

每次我运行导航到这个视图，我都会得到一个无限循环。似乎（从我的控制台日志中）控制器一次又一次地加载。当我注释掉这些行时，页面的其余部分加载就好了。是否有任何原因uib-carousel会导致这样的重载？我是否正确实施了这个？这是我的控制器代码：

myApp.controller( 'myShoesController', [ '$http', '$location', function( $http, $location ) {

var vm = this;
vm.shoes = [];


console.log( 'myShoesController connected' );

vm.myShoes = function() {
  console.log( 'running vm.myShoes' );
    $http ({
      method:'GET',
      url:'/shoes'
    }).then(function success( response ) {
      vm.shoes = response.data;
      console.log( 'response from shoes', response );
    }).catch(function(err) {
      console.log('error returning shoes:', err);
    });
  };

  vm.myShoes();
}]);

以下是带有路径的主app.js文件（我最初认为可能是原因，但看起来很好）：

var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']);

/// Routes ///
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

  $locationProvider.hashPrefix('');

  $routeProvider
    .when('/home', {
      templateUrl: '/views/home.html',
      controller: "LoginController as lc"
    })
    .when('/register', {
      templateUrl: '/views/register.html',
      controller: "LoginController as lc"
    })
    .when('/user', {
      templateUrl: '/views/user.html',
      controller: "UserController as uc"
    })
    .when( '/addItem', {
      templateUrl: '/views/addItem.html',
      controller: "addItemController as aic"
    })
    .when( '/myShoes', {
      templateUrl: '/views/myShoes.html',
      controller: "myShoesController as msc"
    })
    .when( '/selectShoes', {
      templateUrl: '/views/selectShoes.html',
      controller: "selectShoesController as ssc"
    })
    .otherwise({
      redirectTo: 'home'
    });

}]);

我的依赖项：

<script type="text/javascript" src="/vendors/angular.min.js"></script>
<script type="text/javascript" src="/vendors/ui-bootstrap-tpls.js" charset="utf-8"></script>
<script type="text/javascript" src="/vendors/ui-bootstrap.js" charset="utf-8"></script>
<script type="text/javascript" src="/vendors/angular-route.min.js"></script>

我正在使用角度1.6

Answer 1

我不确定您的数据是什么样的，但在创建了一个plunker并且玩游戏后，看起来您的问题可能是index="slide._id"。我发现如果其中一张幻灯片中没有0的索引值，并且索引不是连续的，那么轮播就会变得混乱。

我认为可以说数组规则适用于index属性。也就是说，值必须从零开始并且是顺序的，就像数组访问器一样。

对$index属性使用index可能更好，或者确保您的数据具有顺序且从0开始的ID。

<div style="height: 305px">
  <div uib-carousel="" active="false" interval="5000" no-wrap="true">
    <div uib-slide="" ng-repeat="slide in shoes track by $index" index="$index">
      <img ng-src="{{slide.image}}" style="margin:auto;" />
      <div class="carousel-caption">
        <h4>Slide {{slide._id}}</h4>
        <p>{{slide.text}}</p>
      </div>
    </div>
  </div>
</div>

https://plnkr.co/edit/wMtj7tt8M3AN3e7RMMfk?p=preview

uib-carousel导致无限循环

1 个答案: