如何使用angularjs ng-model绑定Bootstrap-datepicker元素？

Question

这是日期字段的html:

<div class='form-group'>
  <label>Check out</label>
    <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">
</div>
<script>
$('#check-out').datepicker();
</script>

日期选择器显示在输入字段中.但是如果我在我的控制器中执行此操作:

console.log($scope.checkOut);

我得到undefined in the javascript console.怎么解决这个？
有没有办法使用更好的方法bootstrap-datepicker有angularjs？

我不想使用,angular-ui/angular-strap因为我的项目是用javascript库膨胀的.

Answer 1

正如@lort建议的那样,您无法从控制器访问datepicker模型,因为datepicker有自己的私有范围.

如果你设置: ng-model="parent.checkOut"

并在控制器中定义: $scope.parent = {checkOut:''};

你可以使用以下方式访问datepicker: $scope.parent.checkOut

Answer 2

我正在使用bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/和angularjs,我对ng-model有同样的问题,所以我使用bootstrap jquery函数获取输入日期值,下面是代码我的控制器,它对我有用.

HTML

<input class="form-control" name="date" id="datetimepicker" placeholder="select date">

调节器

$(function() {

    //for displaying datepicker

    $('#datetimepicker').datetimepicker({
        viewMode: 'years',
        format: 'DD/MM/YYYY',
    });

    //for getting input value

    $("#datetimepicker").on("dp.change", function() {

        $scope.selecteddate = $("#datetimepicker").val();
        alert("selected date is " + $scope.selecteddate);

    });

 });