angularjs ng-repeat 不适用于 owl-carousel

Question

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

截图供参考

After Applying ng-repeat

如果我省略 ng-repeat 并使用静态项，那么它会正常工作。

When used static

HTML ng-repeat 代码

<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 控制器代码

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

此解决方案对您有所帮助

 Put owl carousel function after getting response 
 **use Like:** 
 $timeout(function(){ here your owl carousel function },10);

Answer 2

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

angularjs ng-repeat 不适用于 owl-carousel

angularjs ng-repeat is not working to owl-carousel

angularjs

angularjs-ng-repeat

owl-carousel