在我当前的项目中,我将这个calendar.js javascript库与AngularJS一起使用。
我以这种方式将calendar.js小部件和AngularJS ng模型绑定到我的输入字段:
<input class="vDateField" type="text" ng-model="date" ng-init="date='{{ form.date.value | default_if_none:"" }}'"
vDateField是bing日历和{{}}是后端模板引擎标记的类。
我的问题是,当我用calendarjs选择器选择日期时,我的输入ified会更新,但ng模型"日期"不会。
有没有任何不修改calendarjs小部件的解决方案??
这里呈现的输入标签:
<div>
<label class="required" for="id_date">Data contratto</label>
<input class="vDateField ng-pristine ng-valid ng-touched" type="text" ng-model="date" ng-init="date=''" name="date" placeholder="02/02/2015">
<span class="datetimeshortcuts"> <a href="javascript:DateTimeShortcuts.handleCalendarQuickLink(0, 0);">Oggi</a> | <a href="javascript:DateTimeShortcuts.openCalendar(0);" id="calendarlink0"><img src="/static/admin/img/icon_calendar.gif" alt="Calendario"></a></span>
</div>
这里是picker的javascript源代码。DateTimeShortCuts.js包含用于显示迷你链接的代码,该链接用于将当前日期时间设置到我的输入字段,以及用于打开日历小部件的迷你日历图标。
我通过在输入标记中添加class="vDateField"来注册小部件,如下所示。
DateTimeShortCuts.js
calendar.js
也有同样的问题,像这样解决了(jquery日期选择器的例子)
$('#myDateInput').datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText) {
updateDate(dateText);
},
onClose: function (dateText) {
updateDate(dateText);
}
});
function updateDate(dateText) {
var date = angular.element('#myDateInput').val();
angular.element('#myDateInput').val(date);
if (dateText) {
$scope.object.date = dateText;
}
$scope.object.dateReadable = date;
$scope.safeApply(function (childScope) { });
}
// safely apply changes to the $scope
$scope.safeApply = function (fn) {
var phase = this.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if (fn && (typeof (fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
在页面加载上设置日期
$("#myDateInput").datepicker("setDate", $scope.dateReadable);
HTML
<div class="form-group">
<label for="date" class="control-label">Date:</label>
<input type="date" name="date" id="myDateInput" class="form-control" />
</div>
这里重要的是,我使用SafeApply将更改应用于$scope。希望这个例子对我来说是一个有用的例子
为什么我必须这么做?Well angular不知道在其$范围之外发生了什么,在本例中是jQUery。所以我们必须手动告诉它。
编辑:date和dateReadable可能有点混淆,但忽略详细信息,查看将更改绑定到$scope的safeApply。
如果您能更详细地提出问题,将会很有帮助。但是,您是否在输入元素之前尝试过ng init="date='{form.date.value|default_if_none:"}}'"?
我已经用这个指令解决了问题,并在3d部件小部件的回调函数上设置了$('idget_element').trick('change')。
在这种情况下,小部件是默认的Django Admin日期小部件。
contract_form_app.directive('vDateField', [function() {
return {
require: "ngModel",
restrict: "A",
link: function(scope, element, attrs, ngModelCtrl) {
element.addClass("vDateField");
var updateModel = function (dateText) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
django.jQuery('input').on('change', function() {
updateModel(element.val());
});
}
};
}]);