Apa arti dari Requirement: 'ngModel'?

Ini adalah HTML untuk direktif saya:

<textarea data-modal="modal" data-mydir ng:model="abc"></textarea>

Dalam arahan saya, saya memiliki ini:

return {
        require: 'ngModel',
        replace: true,
        scope: {
            modal: '=modal',
            ngModel: '=',
            pid: '=pid'
        },

Dapatkah seseorang memberi tahu saya, apa pentingnya Requirement: 'ngModel'? Saya melihat ini dalam banyak arahan yang berbeda. Bisakah saya menyebut ini data-modal?

Saya bingung karena ketika saya mengubahnya menjadi data-modal saya mendapat pesan dari Angular mengatakan

Controller 'ngModel', required by directive 'textarea', can't be found!

The requireinstruksi memberi Anda controller untuk direktif Anda nama sebagai argumen keempat untuk Anda linkfungsi. (Anda dapat menggunakan ^untuk mencari pengontrol pada elemen induk; ?menjadikannya opsional.) Jadi, require: 'ngModel'memberi Anda pengontrol untuk ngModeldirektif, yang merupakanngModelController .

Pengontrol arahan dapat ditulis untuk menyediakan API yang dapat digunakan oleh arahan lain; dengan ngModelController, Anda mendapatkan akses ke fungsionalitas khusus yang ada di ngModeldalamnya, termasuk mendapatkan dan menyetel nilainya. Perhatikan contoh berikut:

<input color-picker ng-model="project.color">

app.directive('colorPicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the ngModel whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            ngModel.$setViewValue(newValue);
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      ngModel.$render = function() {
        element.val(ngModel.$modelValue);
        element.change();                
      };
    }
  }
});

Direktif ini menggunakan ngModelpengontrol untuk mendapatkan dan menyetel nilai warna dari colorpicker. Lihat contoh JSFiddle ini: http://jsfiddle.net/BinaryMuse/AnMhx/

Jika Anda menggunakan require: 'ngModel', Anda mungkin juga tidak boleh menggunakan ngModel: '='dalam ruang lingkup isolasi Anda; yang ngModelControllermemberi Anda semua akses yang Anda butuhkan untuk mengubah nilainya.

Contoh bawah di beranda AngularJS juga menggunakan fungsionalitas ini (kecuali menggunakan pengontrol khusus, bukan ngModel).

Adapun casing direktif, misalnya, ngModelvs ng-modelvs data-ng-model: sementara Angular mendukung penggunaan beberapa bentuk di DOM, ketika Anda merujuk ke direktif dengan nama (misalnya, saat membuat direktif, atau menggunakan require), Anda selalu menggunakan lowerCamelCase bentuk nama.

Seperti yang dinyatakan dalam dokumentasi Membuat Arahan Kustom : (Pertama untuk pertanyaan Anda di komentar)

Bisakah saya minta sebagai data-ng-modelgantinya?

Jawabannya:

Praktik Terbaik : Lebih suka menggunakan format yang dipisahkan tanda hubung (misalnya ng-binduntuk ngBind). Jika Anda ingin menggunakan alat validasi HTML, Anda dapat menggunakan dataversi -prefixed (misalnya data-ng-binduntuk ngBind). Formulir lain yang ditunjukkan di atas diterima karena alasan warisan tetapi kami menyarankan Anda untuk menghindarinya.

Contoh:

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

Kedua, ?ngModelmewakili apa?

// Always use along with an ng-model
require: '?ngModel',

Saat menggunakan direktif Anda, itu memaksanya untuk digunakan bersama dengan atribut / pengontrol ng-model.

The requirepengaturan

(Ekstrak dari buku AngularJS oleh Brad Green & Shyam Seshadri)

Direktif lain dapat meminta pengontrol ini diteruskan kepada mereka dengan sintaks properti require . Bentuk lengkap kebutuhan terlihat seperti:

require: '^?directiveName'

Pilihan:

1. directiveName

   Nama kandang unta ini menentukan dari mana arahan pengontrol harus berasal. Jadi jika <my-menuitem>direktif kami perlu menemukan pengontrol pada induknya <my-menu>, kami akan menuliskannya sebagai myMenu.

2. ^

   Secara default, Angular mendapatkan pengontrol dari direktif bernama pada elemen yang sama. Menambahkan ^simbol opsional ini berarti juga berjalan di atas pohon DOM untuk menemukan direktif. Sebagai contoh, kita perlu menambahkan simbol ini; string terakhir adalah ^myMenu.

3. ?

   Jika pengontrol yang diperlukan tidak ditemukan, Angular akan mengeluarkan pengecualian untuk memberi tahu Anda tentang masalah tersebut. Menambahkan ?simbol ke string mengatakan bahwa pengontrol ini opsional dan pengecualian tidak boleh dilemparkan jika tidak ditemukan. Meskipun kedengarannya tidak mungkin, jika kita ingin membiarkan <my-menu-item>s digunakan tanpa <mymenu>wadah, kita bisa menambahkan ini untuk string Requirement akhir ?^myMenu.

The require:'ngModel'dan require:'^ngModel'memungkinkan Anda untuk menyuntikkan model melekat unsur atau elemen induknya yang direktif terikat.

Ini pada dasarnya cara termudah untuk meneruskan ngModel ke dalam fungsi tautan / kompilasi alih-alih meneruskannya menggunakan opsi cakupan. Setelah Anda memiliki akses ke ngModel, Anda dapat mengubah nilainya menggunakan $setViewValue, membuatnya kotor / bersih menggunakan $formatters, menerapkan pengamat, dll.

Di bawah ini adalah contoh sederhana untuk meneruskan ngModel dan mengubah nilainya setelah 5 detik.

Demo: http://jsfiddle.net/t2GAS/2/

myApp.directive('myDirective', function($timeout) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$render = function() {
            $timeout(function() {
                ngModel.$setViewValue('StackOverflow');  
            }, 5000);                
        };
    }
  };
});