当元素在角度之外更新时更新绑定

Question

我有一个如下的日期选择器：

<div class="form-group col-md-6">
    <label for="dob" class="col-form-label">Date of Birth:</label>
    <input type="text" name="daterangepicker" id="dob" class="form-control form-control-sm"
           ng-model="dtDateOfBirth" autocomplete="off">
    <button class="btn btn-outline-primary" ng-click="age()">Age</button>
</div>

...我正在使用daterangepicker 库。即使用户单击了input 并导航离开，我也需要允许日期为空。所以我在设置中使用了autoUpdateInput = false，如下图

$('input[name="daterangepicker"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    autoUpdateInput: false,
    locale: {
        format: 'DD-MMM-YYYY',
        cancelLabel: 'Clear'
    }
});

$('input[name="daterangepicker"]').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('DD-MMM-YYYY'));
});

$('input[name="daterangepicker"]').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
});

但问题是，$scope.dtDateOfBirth 在用户选择日期时不会更新。我如何告诉angularjs 变量需要更新？

Answer 1

您需要使用directive。因为没有为 jquery 回调更新模型。

app.directive("daterangepicker", function ($parse) {
  return {
    restrict: "A",
    link: function (scope, elem, attrs, ngModelCtrl) {
      elem.daterangepicker({
          singleDatePicker: true,
          showDropdowns: true,
          autoUpdateInput: false,
          locale: {
              format: 'DD-MMM-YYYY',
              cancelLabel: 'Clear'
          }
      });
      elem.on('apply.daterangepicker', function (ev, picker) {
        var model = $parse(attrs.daterangepicker);
        var modelSetter = model.assign;
        scope.$apply(function () {
          modelSetter(scope, { startDate: picker.startDate.toDate(), endDate: picker.endDate.toDate() });
        });

      });
    }
  }

});

div class="form-group col-md-6">
    <label for="dob" class="col-form-label">Date of Birth:</label>
    <input type="text" name="daterangepicker" id="dob" class="form-control form-control-sm"                           daterangepicker="dtDateOfBirth"
           ng-model="dtDateOfBirth" autocomplete="off">
    <button class="btn btn-outline-primary" ng-click="age()">Age</button>
</div>