Soru Angularjs kullanarak kaydedilmemiş verileri algıla


Ben AngularJs için bir acemi, bu yüzden önemsiz olabilir. Herhangi bir dahili AngularJ var mı directive Kaydedilmemiş verileri bir formda algılamak için Eğer değilse, o zaman nasıl yazılacağına dair bir tane. Herhangi bir işaretçi takdir edilecektir.

html kodu

<input type="text" runat="server" />

Ve benim açısal js denetleyici kodum

    function MyCtrl1($scope) {
      // code to do stuff
}MyCtrl1.$inject = ['$scope'];

Kaydedilmemiş verileri algılamak için bir yönerge yazmaya çalışıyorum ve yukarıdaki denetleyicide yazılmasını tahmin ediyorum. Yanlış varsa düzeltin.


44
2018-02-13 09:05


Menşei




Cevaplar:


AngularJS CSS sınıflarını ayarlar ng-pristine ve ng-dirty ng-modelini kullandığınız herhangi bir giriş alanında ve FormController'ınızın özellikleri vardır $pristine ve $dirty formu kirli olup olmadığını kontrol edebilirsiniz. Yani evet, mümkün.

Ne yapmaya çalıştığınızı gösteren bir kod verebilir misiniz? Bu size yardımcı olmayı kolaylaştırır.

DÜZENLE

İşte, bozulmamış / kirli bir devletin nasıl tespit edileceğine ve bozulmamış bir duruma nasıl geri dönüleceğine dair basit bir örnek:

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    function Ctrl($scope) {
        var initial = {text: 'initial value'};
        $scope.myModel = angular.copy(initial);
        $scope.revert = function() {
            $scope.myModel = angular.copy(initial);
            $scope.myForm.$setPristine();
        }
    }
    </script>
</head>
<body>
    <form name="myForm" ng-controller="Ctrl">
        myModel.text: <input name="input" ng-model="myModel.text">
        <p>myModel.text = {{myModel.text}}</p>
        <p>$pristine = {{myForm.$pristine}}</p>
        <p>$dirty = {{myForm.$dirty}}</p>
        <button ng-click="revert()">Set pristine</button>
    </form>
</body>
</html>

76
2018-02-13 09:33



Dat iyi çalışıyor. Başka bir soru biliyorum, ancak tarayıcıyı kapatmaya veya başka bir sayfaya gitmeye çalışırken kaydedilmeyen değişikliklerin kullanıcıya bildirilmesi mümkün mü? - iJade
Elbette, bu kesinlikle mümkün. Bunu formdaki bir direktifle yaparsın, ama dediğin gibi, buradaki başka bir soruda olmalı. - Anders Ekdahl
Bunu başka bir soru olarak yayınladı. stackoverflow.com/questions/14852802/... - iJade
Görünüşe göre, $ setPristine, Angular'ın en son sürümünde kaldırıldı. - sthomps
$ kirli / $ bozulmamış, en az 1.0.7 olarak beklendiği gibi çalışmıyor. Basit bir formum varsa ve bir değeri değiştirirseniz, $ dirty true değerine ayarlanır. Ancak, değeri ilk değere geri döndürürsem, $ kirli doğrudur. Knockout'tan geldiğinizde, modelinizin kirli olup olmadığını belirtmenin bir yolu vardır (varsayılan, tüm modeli JSON'a dönüştürür ve bir dize karşılaştırır). Açısal olarak bu mümkün mü? - Corey Cole


İzleme pristine/dirty durumu başlatmak için iyi bir yerdir, ancak kullanıcıya mümkün olan en iyi kullanılabilirliği sağlamak istiyorsanız, herhangi bir değişikliği algılamak için mevcut form verilerini başlangıç ​​form verileriyle karşılaştırmanız gerekir. Form kirliyse, hala verileri değiştirdiği anlamına gelmez.

Bu kesin sorunu çözmek için çok küçük ve kullanışlı bir modül oluşturdum. Bununla birlikte, kontrol cihazınızın kodunu mümkün olduğunca basit tutabilirsiniz. Ekliyor modified her modele mülk ve hatta otomatik olarak denetleyiciyi kurar ve yalnızca formu sağlayarak tüm formu sıfırlayabilirsiniz reset() yöntemi, böylece manuel olarak değişiklikleri tespit etmek yerine uygulamanızın iş mantığına konsantre olabilirsiniz.

Lütfen Demoyu gör.

Burada bir dağıtım paketi yanı sıra bir kaynak kodu bulabilirsiniz: https://github.com/betsol/angular-input-modified (ayrıca kameriye)

Bu kütüphaneyi kullanmayla ilgili yardıma ihtiyacınız olursa, kişisel olarak bana ulaşabilirsiniz. Yardım etmekten memnun olurum. Şerefe!


35
2017-10-13 11:15



Ben bunu denedim ama benim için evet ya da hayır değiştirilmiş, hiç değişmiyor. Ben modülleri yüklemek için oclazyload kullanıyorum.Çok hüsrana uğramış ama harika eklenti.Uygulamak için adım adım herhangi bir adım var mı ? - Jeeva Jsb
Benim için her zaman değiştirilmiş yanlış :-( - Jeeva Jsb
Bu gerçekten ilginç: "Form kirliyse, hala verileri değiştirdiği anlamına gelmez." Bunun ne demek olduğunu bilmek isterdim :) - sakovias
@sakovias giriş alanına "ABC" girip içeriği silebilirsiniz. Açısal, bu girişi kirli olarak ele alır, ancak alttaki veriler hala aynıdır, yani boş bir dize. Yani kirli, ama değiştirilmemiş. - Slava Fomin II
başka bir özellik varsa daha anlamlı olur changedBunu varsayılan olarak yapar. Ne yazık ki, Açısal 2 veya 4.0 bile bu işlevsellik içerir. - Blauhirn


Denetleyicimde yaptığım buydu.

Değişiklik için form verilerini aldığımda, önce dize temsilini şöyle bir kapsam değişkenine kaydediyorum:

$scope.originalData = JSON.stringify($scope.data);

Sonra bir durum değişikliği dinleyicisi oluşturuyorum:

 var $locationChangeStartUnbind = $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if ($scope.originalData !== JSON.stringify($scope.data)) {
        //Show alert and prevent state change
    } else {
        //DO NOTHING THERE IS NO CHANGES IN THE FORM
    }
});

Ardından, kapsamdaki dinleyiciyi yok ediyorum:

$scope.$on('$destroy', function () {
    window.onbeforeunload = null;
    $locationChangeStartUnbind();
});

Bu yardımcı olur umarım.


14
2018-04-20 16:58



Bu mükemmel, teşekkürler! ps: Bazen Açısal ekleyebilir $$HashKey modele ait özellikler; kullanma angular.toJson($scope.data) 'JSON.stringify ($ scope.data) `yerine, bu açısal durumun, durumları izlemek için kullandığı tüm izleme değişkenlerini kaldırması gerektiği anlamına gelecektir. - iamserious
Tam olarak aradığım şey bu - teşekkürler! @İamserious 'un yorumunu takiben, kullanımı çok daha güvenilir buldum angular.toJson($scope.data) - XstiX
Dinleyicileri, konuşmacılarda kullanmayın. En iyi sonuçları kontrol edin - Jens Alenius


UI yönlendirici ile çalışan bu yönergeyi deneyin.

https://github.com/facultymatt/angular-unsavedChanges


1
2018-04-15 19:03



Önerinini denedim. Ama bir problemim var. Biçim değiştirildikten sonra bozulmamış güncellenmez. Bu yüzden kullanıcı bazı metinleri girerse, bir şekilde temizlerse sayfa hala kaydedilmemiş verileri algılar. - asubanovsky