Угловой набор настроек угловойJS ng-model-options
Я только что обновился до угловой версии 1.3.8.
При использовании версии 1.2.23 я создал директиву для преобразования вида формы данных в модель и наоборот.
Это моя директива:
.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'); }); } }; }]); });
Я вижу здесь, что getters и seters в привязке теперь поддерживаются, но я не могу найти нигде, как использовать как getters, так и seters. Есть ли способ сделать это? То есть – может ли ng-model-options заменить мою директиву конвертировать?
благодаря
Документация может показаться немного нечеткой, но использование довольно простое. Что тебе необходимо сделать:
-
HTML:
-
в JS-controllerе вместо фактической модели создайте функцию, которая вернет значение (+ apply stripping), если нет переданного параметра и который обновит модель (+ применить другие изменения), если параметр отправлен.
Геттер / сеттеры – это в основном другой «слой» между значением представления и значением модели.
Пример:
$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('...') ); } }
DEMO PLUNKER: http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview
(проверьте консоль – http://screencast.com/t/3SlMyGnscl )
ПРИМЕЧАНИЕ. Было бы интересно посмотреть, как это будет выглядеть с точки зрения повторного использования. Я бы посоветовал создавать эти геттеры / сеттеры как экстернализированные методы многократного использования и иметь для них генераторы (поскольку для каждого случая модель данных различна). А в controllerах можно назвать только эти генераторы. Только мои 2 цента.
Этот вопрос довольно старый, но для IE9 + (и, конечно, всех других соответствующих браузеров) вы можете использовать метод getter / setter ECMAScript 5, который я бы предпочел против опции gterterSetter 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/