Saat ini saya sedang belajar AngularJS dan mengalami kesulitan memahami perbedaan antara ng-binddan ng-model.

Adakah yang bisa memberi tahu saya perbedaannya dan kapan yang satu harus digunakan?

ng-bind memiliki pengikatan data satu arah ($ scope -> view). Ini memiliki jalan pintas {{ val }} yang menampilkan nilai ruang lingkup $scope.valdimasukkan ke dalam html di mana valadalah nama variabel.

ng-model dimaksudkan untuk diletakkan di dalam elemen form dan memiliki pengikatan data dua arah ($ scope -> view and view -> $ scope) mis <input ng-model="val"/>.

jawaban tosh sampai ke inti pertanyaan dengan baik. Ini beberapa informasi tambahan ....

Penyaring & Pemformat

ng-binddan ng-modelkeduanya memiliki konsep mengubah data sebelum mengeluarkannya untuk pengguna. Untuk itu, ng-bindgunakan filter , sementara ng-modelmenggunakan formatters .

filter (ng-bind)

Dengan ng-bind, Anda dapat menggunakan filter untuk mengubah data Anda. Sebagai contoh,

<div ng-bind="mystring | uppercase"></div>,

atau lebih sederhana:

<div>{{mystring | uppercase}}</div>

Perhatikan bahwa uppercaseini adalah filter sudut bawaan , meskipun Anda juga dapat membuat filter sendiri .

formatter (model-ng)

Untuk membuat pemformat ng-model, Anda membuat direktif require: 'ngModel'yang memungkinkan, yang memungkinkan arahan untuk mendapatkan akses ke ngModel controller. Sebagai contoh:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$formatters.push(function(value) {
        return value.toUpperCase();
      });
    }
  }
}

Kemudian di parsial Anda:

<input ngModel="mystring" my-model-formatter />

Ini pada dasarnya ng-modelsetara dengan apa yang dilakukan uppercase filter dalam ng-bindcontoh di atas.

Parser

Sekarang, bagaimana jika Anda berencana untuk mengizinkan pengguna untuk mengubah nilai mystring? ng-bindhanya memiliki satu cara mengikat, dari tampilan model -> . Namun, dapat mengikat dari tampilan -> model yang berarti Anda dapat mengizinkan pengguna untuk mengubah data model, dan menggunakan parser Anda dapat memformat data pengguna secara efisien. Begini tampilannya:ng-model

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
}

Bermain dengan plunker langsung dari contoh ng-modelformatter / parser

Apa lagi?

ng-modeljuga memiliki validasi bawaan. Cukup memodifikasi Anda $parsersatau $formattersfungsi untuk memanggil ngModel 's controller.$setValidity(validationErrorKey, isValid)fungsi .

Angular 1.3 memiliki larik $ validator baru yang dapat Anda gunakan untuk validasi alih-alih$parsersatau$formatters.

Angular 1.3 juga memiliki dukungan pengambil / penyetel untuk ngModel

ngModel

Arahan ini dijalankan pada tingkat prioritas 1.

Contoh Plunker

JAVASCRIPT

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.val = '1';
}]);

CSS

.my-input {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;
}
.my-input.ng-invalid {
    color:white;
    background: red;
}

HTML

<p id="inputDescription">
   Update input to see transitions when valid/invalid.
   Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

ngModel bertanggung jawab untuk:

• Mengikat tampilan ke dalam model, yang diperlukan oleh arahan lain seperti input, textarea atau pilih.
• Memberikan perilaku validasi (mis. Diperlukan, nomor, email, url).
• Menjaga status kontrol (kesalahan valid / tidak valid, kotor / murni, tersentuh / tidak tersentuh,).
• Mengatur kelas css terkait pada elemen (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-disentuh, ng-tak tersentuh) termasuk animasi.
• Mendaftarkan kontrol dengan formulir induknya.

ngBind

Arahan ini dijalankan pada tingkat prioritas 0.

Contoh Plunker

JAVASCRIPT

angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
    $scope.name = 'Whirled';
}]);

HTML

<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

ngBind bertanggung jawab untuk:

• Mengganti konten teks dari elemen HTML yang ditentukan dengan nilai ekspresi yang diberikan.

Jika Anda ragu-ragu untuk menggunakan ng-bindatau ng-model, coba jawab pertanyaan ini:

Apakah Anda hanya perlu menampilkan data?

• Ya: ng-bind (pengikatan satu arah)

• Tidak: ng-model (mengikat dua arah)

Apakah Anda perlu mengikat konten teks (dan bukan nilai)?

• Iya: ng-bind

• Tidak: ng-model (Anda tidak boleh menggunakan ng-bind jika nilainya diperlukan)

Apakah tag Anda HTML <input>?

• Ya: ng-model (Anda tidak dapat menggunakan ng-bind dengan <input>tag)

• Tidak: ng-bind

ng-model

direktif model ng di AngularJS adalah salah satu kekuatan terbesar untuk mengikat variabel yang digunakan dalam aplikasi dengan komponen input. Ini berfungsi sebagai pengikatan data dua arah. Jika Anda ingin lebih memahami tentang ikatan dua arah, Anda memiliki komponen input dan nilai yang diperbarui ke bidang itu harus tercermin di bagian lain dari aplikasi. Solusi yang lebih baik adalah mengikat variabel ke bidang itu dan menampilkan variabel itu di mana pun Anda ingin menampilkan nilai yang diperbarui melalui aplikasi.

ng-bind

ng-bind bekerja jauh berbeda dari ng-model. ng-bind adalah salah satu cara pengikatan data yang digunakan untuk menampilkan nilai di dalam komponen html sebagai HTML bagian dalam. Arahan ini tidak dapat digunakan untuk mengikat dengan variabel tetapi hanya dengan konten elemen HTML. Bahkan ini dapat digunakan bersama dengan ng-model untuk mengikat komponen ke elemen HTML. Arahan ini sangat berguna untuk memperbarui blok seperti div, span, dll. Dengan konten HTML dalam.

Contoh ini akan membantu Anda untuk mengerti.

ngModel biasanya digunakan untuk memasukkan tag untuk mengikat variabel yang kita dapat mengubah variabel dari halaman controller dan html tetapi ngBind menggunakan untuk menampilkan variabel di halaman html dan kita dapat mengubah variabel hanya dari controller dan html hanya menunjukkan variabel.

Kita dapat menggunakan ng-bind dengan <p>untuk menampilkan, kita dapat menggunakan jalan pintas untuk ng-bind {{model}}, kita tidak dapat menggunakan ng-bind dengan kontrol input html, tetapi kita dapat menggunakan jalan pintas untuk ng-bind {{model}}dengan kontrol input html.

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>