1

以下の HTML では、dateRange という ng-model で選択した日付範囲を設定しようとしています。入力テキスト フィールドは選択された値を正しく取得していますが、dateRange はまだ null です。この問題を解決するにはどうすればよいですか?

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker-bs3.css" />

<body ng-app="testApp" ng-controller="testCtrl">

<p>Select Date Range:</p>
<input type="text" name="daterange" id="daterange" ng-model="dateRange" /> Selected Range: {{dateRange}}

<script>
    var app = angular.module('testApp', []);
    app.controller('testCtrl', function($scope, $http) {
        $scope.dateRange = null;
    });
</script>

<script type="text/javascript">
    $(function() {
        $('#daterange').daterangepicker();
    });
</script>
</body>

</html>

4

1 に答える 1

1

ディレクティブでプラグインをラップしてみてください。AngularJS の経験則も、jquery がロードされた後に angular をロードします。

マークアップ

<input type="text" daterange name="daterange" id="daterange" ng-model="dateRange"/>

指令

app.directive('daterange', function(){
    return{
       link: function(scope, element){
          element.daterangepicker();
       }
    }
})

デモプランカー

于 2015-06-06T19:51:02.773 に答える