Search code examples
javascriptjqueryangularjsowl-carouselowl-carousel-2

angular.js TypeError: $(...).owlCarousel is not a function

I am using angular js and data-ng-repeat to get data. Below is my HTML.

      <div id="newsslide" class="owl-carousel owl-theme">
          <div class="item darkCyan" data-ng-repeat="items in NewsList">
                        Hello
          </div>
      </div>

Here is my JS

    $scope.getNewsList = function (Id) {
    var getData = HomeService.getNewsList(Id);
    getData.then(function (_result) {
        $scope.getMediaList(Id);
        if (_result.data.length > 0) {
            $scope.NewsList = _result.data;
            $scope.NewsNoRecords = false;
            $timeout(function () {
                $("#newsslide").owlCarousel({
                    items: 3,                        
                    nav: false,
                    dots: true,
                    rtl:true,
                    // autoPlay: 3000,
                    navText: [
                    "<i class='fa fa-angle-left'></i>",
                    "<i class='fa fa-angle-right'></i>"
                    ]
                });
            }, 1000);
        }
        else {
            $scope.NewsNoRecords = true;
        }
    }, function (errorMsg) {
        $scope.loadingDataEntryList = false;
        console.log('Error in getting records - ' + JSON.stringify(errorMsg))
    });
}

Data is binding Fine. But it shows

TypeError: $(...).owlCarousel is not a function.

I also tried to run $("#newsslide").owlCarousel({}); through pasting in chrome developer console. I got error

Uncaught TypeError: $(...).owlCarousel is not a function at Anonymous:1:18.

Below is library sequence i added, [jQuery library was in head tag before this image. and thats why it cause problem] [enter image description here]1

I have searched a lot. Please help. Thanks

Solution

  • These can be the potential reason.

    1. It seems you have not added Jquery
    2. Or Jquery is added after Angularjs
    3. haven't added the "owl carousel" JS file

    You need to add jquery before angularjs. 

    <script src="jquery.min.js"></script>
<script src="angular.min.js"></script>