angular-daterangepickerがangularJsと連携していません

私は自分のアプリケーションの一つでangular-daterangepickerを使用しようとしています。私は、このリンクをたどっています：angular-daterangepickerがangularJsと連携していません

https://github.com/fragaria/angular-daterangepickerは、モジュールをインストールしました。
コントローラに依存関係を書き込みます。
スクリプトタグを使用して.html/.ejsファイルに依存関係を追加します。

<script src="jquery/dist/jquery.min.js"></script> 
<script src="jquery-ui/jquery-ui.js"></script> 
<script src="angular/angular.min.js"></script> 
<script src="moment/moment.js"></script> 
<script src="angular-daterangepicker/bootstrap- daterangepicker/daterangepicker.js"></script> 
<script src="angular-daterangepicker/js/angular-daterangepicker.js"></script> 
<link rel="stylesheet" href="angular-daterangepicker/bootstrap-dist/css/bootstrap.css"/> 
<link rel="stylesheet" href="angular-daterangepicker/bootstrap-daterangepicker/daterangepicker.css"/> 

$scope.datePicker.date = {startDate: null, endDate: null}; //in controller if i use this i get error (2) 
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" />

エラー：このエラーを取り除くためにどのように

1) TypeError: el.daterangepicker is not a function

2) TypeError: Cannot set property 'date' of undefined

？

出典

2017-01-23 Tush Bedva

は、これは実施例である - Uはありがとうhttps://github.com/fragaria/angular-daterangepicker

<head> 
    <meta charset="utf-8"> 
    <title>Daterange picker example</title> 

    <!-- bower:css --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css" /> 
    <!-- endbower --> 

</head> 

<body> 
    <!-- bower:js --> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-messages.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.js"></script> 
    <!-- endbower --> 

    <script src="angular-daterangepicker-master/js/angular-daterangepicker.min.js"></script> 

<div class="container"> 
    <h1>Daterange picker example</h1> 

    <div class="row"> 
     <div class="col-md-6" ng-controller="TestCtrl"> 
      <form name="dateForm" class="form-horizontal"> 
       <div class="form-group"> 
        <label for="daterange1" class="control-label">Simple picker</label> 
        <input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text" 
          ng-model="date" required/> 
       </div> 
     </form> 

      <div class="row"> 
       <h4>Model:</h4> 
       <div class="col-md-12 well"> 
        <label>Date range:</label><br> 
        {{date | json}}<br> 
        <label>Single date:</label><br> 
        {{singleDate | json}}<br> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 


<script> 
exampleApp = angular.module('example', ['ngMessages', 'daterangepicker']); 
exampleApp.controller('TestCtrl', function($scope) { 
    $scope.date = { 
     startDate: null, 
     endDate: null 
    }; 


}); 

angular.bootstrap(document, ['example']);</script> 

</html>

出典

2017-01-23 08:48:22 IftekharDani

からこのファイルをダウンロードし、 "角度-daterangepicker.min.js" を含める必要があり!!上記の変更を行った後でも、同じエラーが表示されています!! @lftekharDani –

サンプルアプリケーションで動作していますが、Webアプリケーションで動作していません！私はui-routerを経由してルーティングしているので、私はangular.bootstrapを使用できません。それでも役に立つのです。承認して....ありがとう –

angular-daterangepickerがangularJsと連携していません

答えて

関連する問題