Обновление ng-модели в директиве, использующей шаблон

У меня есть директива, которая создается таким образом:

<datepicker ng-model="foo"></datepicker>

Внутри директивы тег datepicker заменяется этим шаблоном:

template: '<div class="datepicker-wrapper input-append">' +
                     '<input type="text" class="datepicker" />' +
                     '<span class="add-on"><i class="icon-calendar"></i></span>' +
                   '</div>'

Значение, которое я хочу связать с ng-моделью, - это значение поля ввода. Каков наилучший способ сделать это, поэтому я поддерживаю двухстороннюю привязку данных ng-модели?

Ответ 1

В зависимости от того, насколько сложна ваша пересылка, вы можете просто использовать область = для выполнения двунаправленного связывания между локальным именем и ngModel, как в этой скрипте:

http://jsfiddle.net/mThrT/22/

У меня было какое-то время, чтобы настроить скрипку по какой-то причине (первый раз, пытаясь с angular), но вот выстрел в деньги:

template: '<div class="datepicker-wrapper input-append">' 
        + '<input type="text" class="datepicker" ng-model="bar" />' 
        + '<span class="add-on"><i class="icon-calendar"></i></span>' 
        + '</div>',
scope: {
    bar: '=ngModel'
},

Ответ 2

Есть несколько способов сделать это.

Существует функция в параметре ctrl функции связывания .$setViewValue(valueHere), которую вы можете использовать для установки значения того, что ссылается на ngModel. Он будет выполнять настройку параметров $dirty и т.д. Существует также свойство .$viewValue, которое вы можете использовать для получения текущего значения. Таким образом, вы можете настроить $watch для свойства scope изоляции, чтобы обновить значения ngModel.

Более правильный способ сделать это все равно будет в функции связывания, но он будет выглядеть так:

app.directive('myDirective', function() {
    restrict: 'E',
    require: 'ngModel',
    scope: {}, //isolate the scope
    template: '<div class="datepicker-wrapper input-append">' +
                         '<input type="text" class="datepicker" ng-model="date" />' +
                         '<span class="add-on"><i class="icon-calendar"></i></span>' +
                       '</div>',
    controller: function($scope) { 
    },
    link: function(scope, elem, attr, ctrl) {
       //get the value from ngModel
       scope.date = ctrl.$viewValue;

       //set the value of ngModel when the local date property changes
       scope.$watch('date', function(value) {
           if(ctrl.$viewValue != value) {
              ctrl.$setViewValue(value);
           }
       });
    }
});