AngularJS ng-модель-параметры геттер-сеттер

Я только что обновился до угловой версии 1.3.8.

при использовании версии 1.2.23 я создал директиву для преобразования представления формы данных в model и vice verse.

Это моя директива:

.directive('dateConverter', ['$filter', function ($filter) {

    return {

        require: 'ngModel',

        link: function (scope, element, attrs, ngModelController) {

            // Convert from view to model
            ngModelController.$parsers.push(function (value) {
                return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss')
            });

            // Convert from model to view
            ngModelController.$formatters.push(function (datetime) {
                return $filter('date')(datetime, 'MM/dd/yyyy');
            });
        }
    };
}]);

});

Я вижу здесь что геттеры и сеттеры в привязке теперь поддерживаются, но я не могу найти нигде, как использовать и геттеры и сеттеры. Есть ли способ сделать это? То есть - может ng-model-options заменяют мою директиву convert?

спасибо

19
angularjs getter-setter

2 ответов

документация может показаться немного нечеткой, но использование довольно простое. Что нужно сделать:

  1. HTML-код: 

    <input ng-model="pageModel.myGetterSetterFunc"
ng-model-options=" {getterSetter: true }">

  2. в контроллере JS вместо фактической модели создайте функцию, которая вернет значение (+ применить зачистку), если параметр не отправлен, и которая обновит модель (+применить другие изменения), если параметр отправлен.

геттер / сеттеры-это в основном еще один " слой" между значением представления и значением модели.

пример:

$scope.pageModel.firstName = '';
$scope.pageModel.myGetterSetterFunc: function (value) {
  if (angular.isDefined(value)) {
    $scope.pageModel.firstName = value + '...';
  } else {        
    return $scope.pageModel.firstName.substr(0,
      $scope.pageModel.firstName.lastIndexOf('...')
    );
  }
}

ДЕМО PLUNKER: http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

(проверить консоль -http://screencast.com/t/3SlMyGnscl)

Примечание: было бы интересно посмотреть, как бы этот масштаб с точки зрения повторного использования. Я бы посоветовал создать эти геттеры/сеттеры как экстернализованные многоразовые методы и иметь генераторы для них (потому что модель данных отличается для каждого случая). А в контроллерах вызывать только те генераторы. Просто мои 2 цента.

35

этот вопрос довольно старый-но для IE9+ (и, конечно, всех других соответствующих браузеров) вы можете использовать метод ECMAScript 5 getter/setter, который я бы предпочел против опции getterSetter ng-model:

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    },
    set fullName (name) {
        var words = name.toString().split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

person.fullName = 'Jack Franklin';
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin

этот пример из http://javascriptplayground.com/blog/2013/12/es5-getters-setters/

4