如何将 jquery 日期选择器与 angular 文本框绑定

Question

我有这个日期选择器

当前有这样的代码

'use strict';

angular.module('core').directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

我是这样用的

<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}

我的问题是我想在多个地方使用它，它们可以有不同的模型，比如

model=date1 , model=date2

有什么方法可以使该通用化，以便它可以在模型上工作，无论它附加到什么模型而不是硬代码

scope.date = date;

Answer 1

使用 ngModel 控制器设置值，而不是在默认范围指令内设置范围变量。如果你正在更新任何范围属性并且你想让它可重用你不应该使用默认范围选项（当没有提到默认为当前范围，与 scope:false 相同），或者如果你需要 ngModel 然后只需使用 ngModel 控制器实例。在您的情况下，3 个关键事项是：-

//Set $viewvalue property of ngModel
ngModelCtrl.$setViewValue(date);
//Update the input with the ngmodel view value or in otherwords render it.
ngModelCtrl.$render();
//Update any bindings invoking digest cycle
scope.$apply();

尝试：

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    //Set viewvalue and apply it to update the input
                    ngModelCtrl.$setViewValue(date);
                    ngModelCtrl.$render();
                    //Update bindings
                    scope.$apply();
                }
            });
        }
    };
});

Demo

如何将 jquery 日期选择器与 angular 文本框绑定

How can i bind jquery datepicker with angular text box

javascript

angularjs

angularjs-directive

angularjs-ng-model