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

Question

我正在使用 angular js 和 data-ng-repeat 来获取数据。下面是我的 HTML.

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

这是我的 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))
    });
}

数据绑定良好。但它显示

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

我还尝试通过在 chrome 开发者控制台中粘贴来运行 $("#newsslide").owlCarousel({});。我收到错误

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

下面是我添加的库序列，[jQuery 库在这张图片之前的 head 标签中。这就是为什么它会导致问题] []1

我搜索了很多。请帮忙。谢谢

Answer 1

这些可能是潜在的原因。

你好像没有添加Jquery
或者Jquery在Angularjs
尚未添加 "owl carousel" JS 文件

您需要在 angularjs 之前添加 jquery。

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

Answer 2

使用 jquery 所有库的附近和上方解决了这个问题。在此之前，jquery 位于 head 标签中。谢谢...

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

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

javascript

jquery

angularjs

owl-carousel

owl-carousel-2