Question

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

供参考的屏幕截图

如果我遗漏了ng-repeat并使用静态项目，那么它就可以正常工作。

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

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的旋转木马，我个人使用angular-ui-bootstrap，它具有引导程序必须提供的所有组件，但提供角度变体。

Answer 3

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

即使我这样做也不起作用.....

我在浏览器中安慰了数据....看看它......

Console Log Image

angularjs ng-repeat对owl-carousel不起作用

3 个答案: