添加 angular-daterangepicker javascript 文件時出錯

Question

我的角度js代碼如下。 我正在使用以下庫添加DateRangePicker

 var inApp = angular.module('myApp', ['daterangepicker']); inApp.controller('incomeController', function($scope, $http) { console.log('income controller'); $scope.datePicker = { date: {startDate: null, endDate: null} }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.js"></script> <script src="https://raw.githubusercontent.com/fragaria/angular-daterangepicker/master/js/angular-daterangepicker.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css" /> <div ng-app="myApp" ng-controller="incomeController"> <div class="form-group"> <label for="optsCustom" class="control-label">Select Date</label> <div> <input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" /> </div> </div> </div>

它顯示以下錯誤

angular.js:14642 TypeError: r.daterangepicker is not a function
at h (angular-daterangepicker.min.js:1)
at angular-daterangepicker.min.js:1
at Scope.$digest (angular.js:18210)
at Scope.$apply (angular.js:18480)
at done (angular.js:12501)
at completeRequest (angular.js:12727)
at XMLHttpRequest.requestLoaded (angular.js:12655)

如何解決這個問題？

Answer 1

問題是您將 GitHub 用作 CDN（這與其使用條款背道而馳）。

URL https://raw.githubusercontent.com/fragaria/angular-daterangepicker/master/js/angular-daterangepicker.js在text/plain; charset=utf-8有一個Content-Type text/plain; charset=utf-8 text/plain; charset=utf-8 。 它不能在script因為它既不是text/javascript也不是application/javascript 。

更多細節在這里： https : //github.blog/2013-04-24-heads-up-nosniff-header-support-coming-to-chrome-and-firefox/

備注：你應該在 DEV 環境中使用angular.js而不是angular.min.js ，因為錯誤信息更清楚：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module daterangepicker due to:
Error: [$injector:nomod] Module 'daterangepicker' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.