angular.js TypeError: $(...).owlCarousel 不是函数答案

【问题标题】：angular.js TypeError: $(...).owlCarousel is not a functionangular.js TypeError: $(...).owlCarousel 不是函数
【发布时间】：2017-07-04 05:20:33
【问题描述】：

我正在使用 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 不是函数。

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

未捕获的类型错误：$(...).owlCarousel 不是函数在匿名：1:18。

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

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

【问题讨论】：

检查你是否在应用初始化模块中添加了引用库，并且它是否出现在页面中（通过查看页面源）
显示在你的主 HTML 文件中加载的<script> 标签（即index.html）
Uncaught TypeError: $(...).owlCarousel is not a function的可能重复

标签： javascript jquery angularjs owl-carousel owl-carousel-2

【解决方案1】：

这些可能是潜在的原因。

您似乎没有添加 Jquery
或者在Angularjs之后添加jquery
尚未添加“猫头鹰轮播”JS文件

你需要在angularjs之前添加jquery。

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

【讨论】：

... 3. 他们没有添加 "owl carousel" JS 文件。 4. 他们包含另一个jquery.js 文件在插件之后
或者他可能在owl carousel文件之后添加了jquery文件。所以，他必须在 owl carousel 文件之前加载 jquery
大家好，我已经添加了库序列的图像。请再看一遍
是的@Ved 将 jquery 带到所有库附近解决了这个问题。在此 jquery 位于 head 标记之前。谢谢....

【解决方案2】：

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

【讨论】：