jquery - Update bindings when element is updated outside angular

Question

I have a date picker as follows:

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

... and I am using the daterangepicker library. I need to allow the date to be empty even when the user has clicked the input and navigated away. So I used the autoUpdateInput = false in the settings as shown below

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

But the issue is, the $scope.dtDateOfBirth is not updated when the user selects a date. How do I tell angularjs that the variable needs to be updated?

标签： jqueryangularjsdaterangepicker

Answer 1

你需要使用指令。因为没有为 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>