Bagaimana saya mengabaikan beban awal saat menonton perubahan model di AngularJS?

Saya memiliki halaman web yang berfungsi sebagai editor untuk satu entitas, yang duduk sebagai grafik yang dalam di properti $ scope.fieldcontainer. Setelah saya mendapat tanggapan dari REST API saya (melalui $ resource), saya menambahkan arloji ke 'fieldcontainer'. Saya menggunakan arloji ini untuk mendeteksi apakah halaman / entitas "kotor". Saat ini saya sedang membuat tombol simpan memantul tetapi saya benar-benar ingin membuat tombol simpan tidak terlihat sampai pengguna memasukkan model.

Apa yang saya dapatkan adalah pemicu tunggal arloji, yang saya pikir sedang terjadi karena tugas .fieldcontainer = ... dilakukan segera setelah saya membuat arloji saya. Saya berpikir untuk hanya menggunakan properti "dirtyCount" untuk menyerap alarm palsu awal tapi itu terasa sangat berantakan ... dan saya pikir harus ada cara "Angular idiomatic" untuk menangani ini - saya bukan satu-satunya menggunakan arloji untuk mendeteksi model kotor.

Berikut kode tempat saya menyetel jam tangan:

 $scope.fieldcontainer = Message.get({id: $scope.entityId },
            function(message,headers) {
                $scope.$watch('fieldcontainer',
                    function() {
                        console.log("model is dirty.");
                        if ($scope.visibility.saveButton) {
                            $('#saveMessageButtonRow').effect("bounce", { times:5, direction: 'right' }, 300);
                        }
                    }, true);
            });

Saya hanya terus berpikir harus ada cara yang lebih bersih untuk melakukan ini daripada menjaga kode "UI dirtying" saya dengan "if (dirtyCount> 0)" ...

mengatur bendera sebelum memuat awal,

var initializing = true

dan kemudian ketika $ watch pertama menyala, lakukan

$scope.$watch('fieldcontainer', function() {
  if (initializing) {
    $timeout(function() { initializing = false; });
  } else {
    // do whatever you were going to do
  }
});

Bendera akan dihancurkan tepat di akhir siklus intisari saat ini, jadi perubahan selanjutnya tidak akan diblokir.

Pertama kali pendengar dipanggil, nilai lama dan nilai baru akan identik. Jadi lakukan saja ini:

$scope.$watch('fieldcontainer', function(newValue, oldValue) {
  if (newValue !== oldValue) {
    // do whatever you were going to do
  }
});

Ini sebenarnya cara yang direkomendasikan oleh dokumen Angular untuk menanganinya :

Setelah pengamat terdaftar dengan ruang lingkup, pendengar fn disebut asinkron (melalui $ evalAsync) untuk menginisialisasi pengamat. Dalam kasus yang jarang terjadi, ini tidak diinginkan karena pendengar dipanggil ketika hasil dari watchExpression tidak berubah. Untuk mendeteksi skenario ini di dalam listener fn, Anda dapat membandingkan newVal dan oldVal. Jika kedua nilai ini identik (===) maka pendengar dipanggil karena inisialisasi

Saya menyadari pertanyaan ini telah dijawab, namun saya punya saran:

$scope.$watch('fieldcontainer', function (new_fieldcontainer, old_fieldcontainer) {
    if (typeof old_fieldcontainer === 'undefined') return;

    // Other code for handling changed object here.
});

Menggunakan flags berfungsi tetapi memiliki sedikit bau kode untuk itu bukan?

Selama pemuatan awal dari nilai saat ini, bidang nilai lama tidak terdefinisi. Jadi contoh di bawah ini membantu Anda untuk mengecualikan pemuatan awal.

$scope.$watch('fieldcontainer', 
  function(newValue, oldValue) {
    if (newValue && oldValue && newValue != oldValue) {
      // here what to do
    }
  }), true;

Hanya validasikan keadaan val baru:

$scope.$watch('fieldcontainer',function(newVal) {
      if(angular.isDefined(newVal)){
          //Do something
      }
});