angular.js TypeError：$（...）。owlCarousel不是函数

Question

我正在使用角度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({});。我收到了错误

  

未捕获的TypeError：$（...）。owlCarousel不是函数       在匿名：1：18。

下面是我添加的库序列，[jQuery库在此图像之前位于head标签中。那就是它导致问题的原因] [] 1

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

Answer 1

这可能是潜在的原因。

1. 您好像没有添加Jquery
   
2. 或者在Angularjs之后添加Jquery
3. 尚未添加“owl carousel”JS文件

您需要在angularjs之前添加jquery。

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

Answer 2

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