如何将 jquery datepicker 与角度文本框绑定答案

【问题标题】：How can i bind jquery datepicker with angular text box如何将 jquery datepicker 与角度文本框绑定
【发布时间】：2015-01-22 03:03:12
【问题描述】：

我有这个日期选择器

http://jsfiddle.net/kevinj/TAeNF/2/

Current 有这样的代码

'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;

【问题讨论】：

data.title 是双向绑定的。因此，如果您将模型更新为内部指令，它将反映在外部的 data.title 上。有什么问题？
@PSL 我在那个输入框中使用了日期选择器，我看到我开始用键盘删除一些东西，然后我可以看到父值得到更新，但在选择日期选择器时没有。我正在使用这个日期选择器jsfiddle.net/kevinj/TAeNF/2
我只是看到它在你的例子中工作得很好，这里也是plnkr.co/edit/FPFuTO?p=preview
@PSL 抱歉，我意识到 datepicker 没有为正确的模型而不是范围赋值存在问题。我已经更详细地编辑了问题
您的问题看起来与工作 jsfiddle 相同。请在演示中向我们展示问题。

标签： javascript angularjs angularjs-directive angularjs-ng-model

【解决方案1】：

使用 ngModel 控制器来设置值，而不是在默认作用域指令中设置作用域变量。如果您正在更新任何范围属性并且希望使其可重用，则不应使用默认范围选项（当未提及时默认为当前范围，与范围相同：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

【讨论】：