Как решить, что сова не работает в шаблоне angularjs - PullRequest
Новая
       36

Как решить, что сова не работает в шаблоне angularjs

0 голосов
/ 06 февраля 2020

Я пытаюсь загрузить ползунок сова-карусель в частичном шаблоне angularJs, но слайды не отображаются. Он отлично работает при загрузке на странице HTML, но не работает в шаблоне. Любое предложение о том, как я могу решить эту проблему:

HTML СТРАНИЦА: 

<!DOCTYPE html>
<html ng-app="main">
    <head>
        <title>Woodworld</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles/animate.css">
        <link rel="stylesheet" href="data/images/css/all.css">
        <link rel="stylesheet" href="styles/layoutstyle.css">
        <link rel="stylesheet" media="screen and (min-width:500px)" href="styles/medium-screens.css">
        <link rel="stylesheet" media="screen and (min-width:1050px)" href="styles/large-screens.css">
        <link rel="stylesheet" href="styles/owl.theme.default.min.css">
        <link rel="stylesheet" href="styles/owl.carousel.min.css">
        <link rel="stylesheet" href="styles/owl.theme.green.min.css">
        <script src="scripts/angular.min.js"></script>
        <script src="scripts/jquery.min.js"></script>
        <script src="scripts/angular-route.min.js"></script>
        <script src="scripts/angular-messages.min.js"></script>
        <script src="scripts/modules.js"></script>
        <script src="scripts/services.js"></script>
        <script src="scripts/controllers.js"></script>
        <script src="scripts/wow.min.js"></script>
        <script src="scripts/owl.carousel.min.js"></script>
    </head>
    <body ng-controller="mainCtrl">
        <div ng-view>
        </div>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/owl.carousel.min.js"></script>
    <script src="scripts/stylescript.js"></script>
    </body>
    </html>

Код шаблона: 

<div owl-carousel class="owl-carousel">
    <div class="item"><h2>Slide 1</h2></div>
    <div class="item"><h2>Slide 2</h2></div>
    <div class="item"><h2>Slide 3</h2></div>
    <div class="item"><h2>Slide 4</h2>Slide </div>
</div>

Код директивы Карусели СОВ: 

app.directive("owlCarousel", owlCarouselDirective);
function owlCarouselDirective() {
  return {
    restrict  : "A",
    transclude: false,
    link      : function ($scope, element, attributes) {
      $scope.initCarousel = function () {
        $(element).owlCarousel($scope.HomeVM.owlDefaultOpts);
      };
    }
  };
}
function owlCarouselItemDirective() {
    return {
      restrict  : "A",
      transclude: false,
      link      : function ($scope, element, attributes) {
        if ( $scope.$last )
          $scope.initCarousel();
      }
    };
}
...