ngModel Biçimlendiriciler ve Ayrıştırıcılar

Aynı soruyu farklı bir biçimde gönderdim ama kimse cevap vermedi. Biçimlendirenlerin ve Ayrıştırıcıların açısal js'de ne yaptığına dair net bir resim elde edemiyorum.

Tanım olarak, hem Biçimlendirenler hem de Ayrıştırıcılar bana benziyor. Belki de bu angularjs'de yeni olduğum için yanılıyorum.

Biçimlendiricilerin Tanımı

Model değeri her değiştiğinde, bir ardışık düzen olarak yürütülecek işlevler dizisi. Her işlev çağrılır, sırayla değeri bir sonrakine geçirir. Kontrol ve doğrulamada görüntülenmek üzere değerleri biçimlendirmek / dönüştürmek için kullanılır.

Ayrıştırıcı Tanımı

Denetim DOM'dan her değer okuduğunda ardışık düzen olarak yürütülecek işlevler dizisi. Her işlev çağrılır, sırayla değeri bir sonrakine geçirir. Doğrulamanın yanı sıra değeri dezenfekte etmek / dönüştürmek için kullanılır. Doğrulama için, ayrıştırıcılar $ setValidity () kullanarak geçerlilik durumunu güncellemeli ve geçersiz değerler için tanımsız döndürmelidir.

Lütfen basit bir örnekle her iki özelliği de anlamama yardım edin. Her ikisinin de basit bir örneği takdir edilecektir.

Bu konu, ilgili bir soruda gerçekten çok iyi ele alındı: AngularJS'de iki yönlü filtreleme nasıl yapılır?

Özetlemek:

• Biçimlendiriciler, model değerlerinin görünümde nasıl görüneceğini değiştirir.
• Ayrıştırıcılar, görünüm değerlerinin modele nasıl kaydedileceğini değiştirir.

Burada, NgModelController api dokümantasyonundaki bir örneği temel alan basit bir örnek verilmiştir :

  //format text going to user (model to view)
  ngModel.$formatters.push(function(value) {
    return value.toUpperCase();
  });

  //format text from the user (view to model)
  ngModel.$parsers.push(function(value) {
    return value.toLowerCase();
  });

Eylemde görebilirsiniz: http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

<input type="button" value="set to 'misko'" ng-click="data.name='misko'"/>
<input type="button" value="set to 'MISKO'" ng-click="data.name='MISKO'"/>
<input changecase ng-model="data.name" />

(Modele görünüm) alanına bir ad yazdığınızda, modelin her zaman küçük harf olduğunu göreceksiniz. Ancak, bir düğmeyi tıkladığınızda ve adı programlı olarak değiştirdiğinizde (görüntülenecek model), giriş alanı her zaman büyük harf olur.

Biçimlendiriciler ve ayrıştırıcılar için başka bir kullanım, tarihleri ​​UTC saatinde depolamak ve bunları girdilerde yerel saatte görüntülemek istediğinizde, bunun için aşağıdaki datepicker yönergesini ve utcToLocal filtresini oluşturdum.

(function () {
    'use strict';

    angular
        .module('app')
        .directive('datepicker', Directive);

    function Directive($filter) {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModel) {
                element.addClass('datepicker');
                element.pickadate({ format: 'dd/mm/yyyy', editable: true });

                // convert utc date to local for display
                ngModel.$formatters.push(function (utcDate) {
                    if (!utcDate)
                        return;

                    return $filter('utcToLocal')(utcDate, 'dd/MM/yyyy');
                });

                // convert local date to utc for storage
                ngModel.$parsers.push(function (localDate) {
                    if (!localDate)
                        return;

                    return moment(localDate, 'DD/MM/YYYY').utc().toISOString();
                });
            }
        };
    }
})();

Yerel saate dönüştürmeden önce giriş tarihinin doğru biçimde olmasını sağlayan bu utcToLocal filtresini kullanır.

(function () {
    'use strict';

    angular
        .module('app')
        .filter('utcToLocal', Filter);

    function Filter($filter) {
        return function (utcDateString, format) {
            if (!utcDateString) {
                return;
            }

            // append 'Z' to the date string to indicate UTC time if the timezone isn't already specified
            if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) {
                utcDateString += 'Z';
            }

            return $filter('date')(utcDateString, format);
        };
    }
})();

moment.js , yerelden utc tarihlerine dönüştürmek için kullanılır.

pickadate.js , kullanılan eklentisidir