AngularJS没有't在Django管理日期小部件上的jQuery事件后更新ng模型

AngularJS doesn't update ng-model after jQuery event on Django admin date widget

本文关键字：jQuery 事件 模型 ng 更新 小部 日期 没有 管理 Django AngularJS      更新时间：2023-10-08

在我当前的项目中，我将这个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">&nbsp;<a href="javascript:DateTimeShortcuts.handleCalendarQuickLink(0, 0);">Oggi</a>&nbsp;|&nbsp;<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());
        });
    }
};
}]);
相关文章：