如何使用angularjs ng-model绑定Bootstrap-datepicker元素？ [英] how to bind Bootstrap-datepicker element with angularjs ng-model?

问题描述

以下是日期字段的html：

Here is the html for the date field :

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

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

The datepicker shows up in the input field. However if I do this in my controller :

console.log($scope.checkOut);

我在javascript控制台中未定义。
如何解决这个问题？

有没有更好的方法来使用 bootstrap-datepicker angularjs ？

I get undefined in the javascript console. How to solve this ?
Is there a better way to use bootstrap-datepicker with angularjs ?

自从我的项目以来，我不想使用 angular-ui / angular-strap 使用javascript库臃肿。

I don't want to use angular-ui/angular-strap since my project is bloated with javascript libraries.

推荐答案

正如@lort建议的那样，你无法从你的控制器访问datepicker模型，因为datepicker有它的拥有私人范围。

As @lort suggests, you cannot access the datepicker model from your controller because the datepicker has its own private scope.

如果设置： ng-model =parent.checkOut

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

您可以使用以下方式访问日期选择器： $ scope.parent.checkOut

you can access the datepicker using: $scope.parent.checkOut

这篇关于如何使用angularjs ng-model绑定Bootstrap-datepicker元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！