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

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

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