Как я могу связать Jquery DatePicker с угловыми текстовым полем

Question

У меня есть этот Datepicker

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

Текущие имеют подобного код

'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 controller пример. В вашем случае 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(); 

Try:

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