如何使用角文本框綁定jquery datepicker

Question

我有這個日期選擇器

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;

Answer 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();
                }
            });
        }
    };
});

演示