Required'ın anlamı nedir: "ngModel"?

Bu benim direktifimin HTML'si:

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

Yönergemde şu var:

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

Biri bana söyleyebilir mi, need'in anlamı nedir: 'ngModel'? Bunu birçok farklı direktifte görüyorum. Bu veri kipi diyebilir miyim?

Kafam karıştı çünkü veri kipine değiştirdiğimde Angular'dan bir mesaj alıyorum

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

requireTalimat size dördüncü argüman olarak adlandırmak yönergesi için denetleyici verir linkfonksiyonu. ( ^Bir üst öğe üzerinde denetleyiciyi aramak için kullanabilirsiniz ; ?onu isteğe bağlı hale getirir.) Bu nedenle require: 'ngModel'size ngModelyönerge için denetleyiciyi verir , bu birngModelController .

Yönerge denetleyicileri, diğer yönergelerin kullanabileceği API'leri sağlamak için yazılabilir; ile ngModelController, ngModeldeğer alma ve ayarlama dahil olmak üzere yerleşik özel işlevlere erişim elde edersiniz . Aşağıdaki örneği düşünün:

<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();                
      };
    }
  }
});

Bu yönerge ngModel, renk seçiciden renk değerini almak ve ayarlamak için denetleyiciyi kullanır . Bu JSFiddle örneğine bakın: http://jsfiddle.net/BinaryMuse/AnMhx/

Eğer kullanıyorsanız require: 'ngModel', muhtemelen olmamalıdır da kullanıyor ngModel: '='sizin izolatı kapsamında; ngModelControllersize değerini değiştirmek için gereken tüm erişim sağlar.

AngularJS ana sayfasındaki alttaki örnek de bu işlevi kullanır (özel bir denetleyici kullanmak dışında ngModel).

Bir direktifin büyük / küçük harf durumuyla ilgili olarak, örneğin, ngModelvs ng-modelvs data-ng-model: Angular, DOM üzerinde birden fazla form kullanılmasını desteklerken, bir direktife adıyla atıfta bulunduğunuzda (örneğin, bir direktif oluştururken veya kullanırken require), her zaman lowerCamelCase'i kullanırsınız adın şekli.

Özel Yönergeler Oluşturma belgelerinde belirtildiği gibi : (Öncelikle yorumdaki sorunuza)

Onun data-ng-modelyerine alabilir miyim ?

Cevap:

En İyi Uygulama : Kısa çizgi ile ayrılmış biçimi kullanmayı tercih edin (örneğin ng-bindiçin ngBind). Bir HTML doğrulama aracı kullanmak istiyorsanız, bunun yerine data-önekli sürümü (örneğin data-ng-bindiçin ngBind) kullanabilirsiniz. Yukarıda gösterilen diğer formlar eski nedenlerden dolayı kabul edilmektedir, ancak bunlardan kaçınmanızı tavsiye ederiz.

Örnekler:

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

İkincisi, neyi ?ngModeltemsil ediyor?

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

Yönergenizi kullanırken, onu öznitelik / denetleyici ile birlikte kullanılmaya zorlar ng-model.

requireayar

( Brad Green & Shyam Seshadri'nin AngularJS kitabından alıntı )

Diğer yönergeler, bu denetleyiciye gereksinim sözdizimi ile geçirilebilir . Gereksinimin tam biçimi şuna benzer:

require: '^?directiveName'

Seçenekler:

1. directiveName

   Bu deve kasalı ad, denetleyicinin hangi yönergeden gelmesi gerektiğini belirtir. Yani yönergemizin <my-menuitem>üst kısmında bir denetleyici bulması gerekiyorsa <my-menu>, bunu myMenu olarak yazardık.

2. ^

   Varsayılan olarak, Angular denetleyiciyi aynı öğe üzerindeki adlandırılmış yönergeden alır. Bu isteğe bağlı ^sembolü eklemek , yönergeyi bulmak için DOM ağacında da yukarı çıkmanızı söyler. Örnek için bu sembolü eklememiz gerekir; son dize olacaktır ^myMenu.

3. ?

   Gerekli denetleyici bulunamazsa, Angular size sorunu anlatmak için bir istisna atar. Dizeye bir ?sembol eklemek , bu denetleyicinin isteğe bağlı olduğunu ve bulunamazsa bir istisna atılmaması gerektiğini söyler. Kulağa pek olası görünmese de, <my-menu-item>s'nin bir <mymenu>kap olmadan kullanılmasına izin vermek isteseydik, bunu son bir gereksinim dizisi için ekleyebilirdik ?^myMenu.

require:'ngModel'Ve require:'^ngModel'sen yönerge bağlı olduğu elementin veya ana elemana bağlı bir model enjekte izin verir.

Temelde ngModel'i bağlantı / derleme işlevine geçirmenin en kolay yolu, onu bir kapsam seçeneği kullanarak iletmektir. NgModel'e eriştiğinizde, değerini kullanarak değiştirebilir, kullanarak $setViewValuekirli / temiz yapabilir $formatters, izleyici uygulayabilirsiniz, vb.

Aşağıda ngModel'i geçmek ve değerini 5 saniye sonra değiştirmek için basit bir örnek verilmiştir.

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);                
        };
    }
  };
});