当元素在 angular 之外更新时更新绑定

问题描述

我有一个日期选择器，如下所示：

<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',picker) {
    $(this).val('');
});

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

解决方法

您需要使用 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>