Problem with loading jquery plugin in Angular (ngroute)

Question

Problem with loading jquery plugin in Angular (ngroute)

Navigation

#1 by (1 votes)

1

I'm wanting to use owl slider in some directive, or in some angled view but it's not working properly, since the HTML is rendered but the jQuery is not acting.

A Owl slider, I put it in a directive, but it's not loading me. When I put it out of a directive, as a native HTML code without any relation to Angular, it works perfectly. My code is as follows:

Directive:

  .directive('owlSlider', function () {
    return {
      templateUrl: '../../views/slider.html',
      restrict: 'AE',
      link: function postLink(scope, element) {
        $(element).owlCarousel({
            navigation: true, // Show next and prev buttons
            slideSpeed: 300,
            paginationSpeed: 400,
            singleItem: true,
            navigationText: ["", ""]
        });
      }
    };
  });

I call the board:

//HTML

<owl-slider class="owl-slider-full owl-carousel owl-theme light-pagination square-pagination dark-pagination-without-next-prev-arrow main-slider"></owl-slider>"

HTML content of the directive (is the templateUrl of the directive)

   
<div class="item owl-bg-img" style="background-image:url('img/slider1.jpg');"></div>

jquery angularjs

asked by Federico Castelau 12.07.2016 в 06:12

source

1 answer

Import project in NetBeans with another version different from my pc values from the checkbox list send null

score 1 · Answer 1

By default owl carrousel is designed to work with <img> tags because when you use backgrounds you must specify height of the elements so they do not collapse.

Here I leave a working demo where the images have a fixed height of 200px, you can change it to the size you like.

angular.module('app', [])
  .directive('owlSlider', function() {
    return {
      template: '<div class="item orange owl-bg-img" style="background-image: url(http://www.owlgraphic.com/owlcarousel/assets/img/demo-slides/touch.png)"/>' +
        '<div class="item yellow owl-bg-img" style="background-image: url(http://www.owlgraphic.com/owlcarousel/assets/img/demo-slides/css3.png)"/>',
      restrict: 'AE',
      link: function postLink(scope, element) {
        $(element).owlCarousel({
          navigation: true, // Show next and prev buttons
          slideSpeed: 300,
          paginationSpeed: 400,
          singleItem: true,
          navigationText: ["", ""]
        });
      }
    };
  });

.orange {
  background: #ff8a3c;
}
.yellow {
  background: #ffd800;
}
.owl-bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" />
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" />
<div ng-app="app">
  <owl-slider class="owl-slider-full owl-carousel owl-theme light-pagination square-pagination dark-pagination-without-next-prev-arrow main-slider"></owl-slider>
</div>