angularjs ng-repeat 不适用于 owl-carousel

Question

我遇到了一个问题，每当 ng-repeat 指令应用于轮播时，项目都会垂直堆叠而不是水平布局。

截图供引用

After Applying ng-repeat

如果我省略 ng-repeat 并使用静态项目，那么它应该按预期工作。

When used static

ng-repeat 的 HTML 代码

<section class="mp diff-types-section main-movies-position">

  <div class="mp our-recommend-sec">
    <div id="owl-demo2" class="owl-carousel" ng-repeat="movie in movieList">
      <div class="item">
        <div class="types-section">
          <img class="types-section-image image-opacity" ng-src="/public/uploads/{{movie.movieId}}/backdrop.jpg" />
        </div>
      </div>
    </div>
  </div>
</section>

AngularJs Controller 代码

app.controller('MainCtrl', ['$rootScope', '$scope', '$http', '$resource', '$route', '$state', '$location', 'localStorageService', function($rootScope, $scope, $http, $resource, $route, $state, $location, localStorageService) {
  $rootScope.showNav = true;
  $rootScope.searchBar = false;

  $scope.getAllMovieList = function() {
    $http.get("/api/getAllMovieList")
      .then(function(response) {
        $scope.movieList = response.data;
        console.log($scope.movieList);
      });
  }

  $scope.getAllMovieList();
}])

如果我像这样保留静态代码，它就可以正常工作，没有任何问题

<section class="mp diff-types-section our-reccomendation-section">
  <div class=" mp our-recommend-sec">
    <div id="owl-demo" class="owl-carousel owl-theme">
      <div class="item">
        <div class="types-section">
          <a ng-click="goToMovieDetail()"> <img class="types-section-image" src="../../images/92ZhAYYce2KfuLgBswzW5HCMKxr.jpg"></a>

        </div>
      </div>
      <div class="item">
        <div class="types-section" ng-click="goToMovieDetail()">
          <img class="types-section-image" src="../../images/Shooter_1920x1080.jpg">

        </div>
      </div>
      <div class="item">
        <div class=" types-section" ng-click="goToMovieDetail()">
          <img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">

        </div>
      </div>
      <div class="item">
        <div class="types-section" ng-click="goToMovieDetail()">
          <img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">

        </div>
      </div>
    </div>
  </div>

</section>

希望我能得到解决方案......

提前致谢。

Answer 1

Owl-carousel 可能无法与 AngularJS 完美配合，建议您使用支持 AngularJS 的 Carousel，我个人使用 angular-ui-bootstrap ，它具有 bootstrap 必须提供的所有组件，但提供了 Angular 变体。