AngularJs + DateRangePicker：当我 select 一个日期范围时，我的 ng-model 没有得到输入文本值

Question

在下面的 HTML 中，我尝试在名为 dateRange 的 ng-model 中设置选定的日期范围。输入文本字段正确获取所选值，但 dateRange 仍然为空。我该怎么做才能解决这个问题？

<!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>

Answer 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();
       }
    }
})

Demo Plunkr

AngularJs + DateRangePicker：当我 select 一个日期范围时，我的 ng-model 没有得到输入文本值

AngularJs + DateRangePicker: my ng-model is not getting the input text value when I select a date range

html

jquery

daterangepicker

angularjs

angularjs-directive