Apa perbedaan antara ng-model dan ng-bind

554

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?

angularjs  angular-ngmodel  ng-bind 
— dubs
sumber

Jawaban:

831

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"/>.

— Omong kosong
sumber
80
Terima kasih ya. Apakah akan menjadi asumsi yang adil untuk mengatakan bahwa ng-bind hanya diperlukan jika nilai untuk ditampilkan tidak memerlukan input pengguna. Dan, ng-modal akan digunakan untuk nilai (<input>) yang melakukannya. Dokumentasi sudut tampaknya menyarankan ini tapi saya setelah pemahaman yang lebih baik.
— dubs
24
@Marc Sebenarnya ng-bind mengikat konten teks elemen, bukan nilainya. Karena itu, ini tidak dapat digunakan dalam elemen <input>.
— trogdor
21
@Marc, dalam hal ini, cukup gunakan: <input type = "text" value = "{{prop}}" />
— John Kurlak
3
@JakubBarczyk {{:: va}} adalah satu waktu mengikat dan bukan satu arah.
— Vlad Bezden
2
@ Willburn Ini satu arah tetapi yang lebih penting hanya sekali saja. Itu berhenti menonton perubahan model setelah model mengambil nilai apa pun. Jadi itu tidak dapat digunakan sebagai pengikatan satu arah jika kita membutuhkan pengikatan satu arah yang teratur.
— Ruslan Stelmachenko
141

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

— Gil Birman
sumber
7
+1. Terima kasih atas info tambahannya. Itu selalu baik / hebat untuk memiliki jawaban cepat (Tosh) dan kemudian rinci MENGAPA & BAGAIMANA jawaban seperti milik Anda untuk mempelajari / memahami lebih banyak dalam alasan / kasus penggunaan.
— redfox05
30

ngModel

Arahan ngModel mengikat input, pilih, textarea (atau custom form control) ke properti pada lingkup.

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

Atribut ngBind memberitahu Angular untuk mengganti konten teks dari elemen HTML yang ditentukan dengan nilai ekspresi yang diberikan, dan untuk memperbarui konten teks ketika nilai ekspresi itu berubah.

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.
— Subodh Ghulaxe
sumber
Meskipun saya menghargai tanggapan menyeluruh ini, jawaban saya yang dipilih sebelumnya akan tetap ada karena hanya memberikan informasi yang cukup untuk memahami perbedaannya.
— dubs
8

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

— Mistalis
sumber
6

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.

— Krishna
sumber
5 

angular.module('testApp',[]).controller('testCTRL',function($scope)
                               
{
  
$scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both.";
$scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding.";            
});
div input{
width:600px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>Diff b/w model and bind</head>
<body data-ng-app="testApp">
    <div data-ng-controller="testCTRL">
        Model-Data : <input type="text" data-ng-model="testingModel">
        <p>{{testingModel}}</p>
          <input type="text" data-ng-bind="testingBind">
          <p ng-bind="testingBind"></p>
    </div>
</body>
Luaskan cuplikan

— ramanathan
sumber
2

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.

— pejman
sumber
1

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>
— Vikash Ranjan Jha
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.