Özel direktifin kapsam bağlayıcısında '@', '&', '=' ve '>' sembollerinin kullanımı: AngularJS

AngularJS'de özel direktiflerin uygulanmasında bu sembollerin kullanımı hakkında çok şey okudum, ancak kavram hala net değil. Yani, özel yönergede kapsam değerlerinden birini kullanırsam ne anlama gelir?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

Buradaki kapsamla tam olarak ne yapıyoruz?

Ayrıca resmi dokümantasyonda "scope: '>'" olup olmadığından da emin değilim. Projemde kullanıldı.

Düzenleme-1

Kullanımı "kapsamında: '>'" projemde bir konuydu ve bu düzeltildi.

AngularJS yönergesinde kapsam, yönerge uygulanan öğenin özniteliklerindeki verilere erişmenizi sağlar.

Bu en iyi şekilde bir örnekle gösterilmiştir:

<div my-customer name="Customer XYZ"></div>

ve direktif tanımı:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

Ne zaman scopeözelliği kullanılır direktif doğrudan ana denetleyici kapsamını erişemez bunu anlamına sözde "izole kapsam" modunda.

Çok basit bir ifadeyle, bağlayıcı sembollerin anlamı:

someObject: '=' (iki yönlü veri bağlama)

someString: '@'(doğrudan veya çift kıvırcık parantez notasyonu ile enterpolasyon yoluyla geçti {{}})

someExpression: '&'(ör. hideDialog())

Bu bilgiler AngularJS yönergesi dokümantasyon sayfasında bulunur , ancak sayfa boyunca bir miktar yayılır.

Sembol >, söz diziminin bir parçası değildir.

Ancak, AngularJS bileşen bağlarının bir< parçası olarak bulunur ve tek yönlü bağlanma anlamına gelir.

> dokümantasyonda değil.

< tek yönlü ciltleme içindir.

@bağlama dizeleri geçmek içindir. Bu dizeler {{}}enterpolasyonlu değerler için ifadeleri destekler .

=ciltleme iki yönlü model bağlama içindir. Ana kapsamdaki model, direktifin yalıtılmış kapsamındaki modele bağlıdır.

& bağlayıcı bir yönerge yönergelerinizin kapsamına geçirilir, böylece yönerge içinde çağırılabilir.

Kapsam: true olarak yönerge ayarladığımızda, Açısal js bu yönerge için yeni bir kapsam oluşturur. Bu, yönerge kapsamında yapılan herhangi bir değişikliğin ana denetleyiciye yansımayacağı anlamına gelir.

< tek yönlü ciltleme

= iki yönlü ciltleme

& fonksiyon bağlama

@ sadece dizeleri geç

Bir müşteri yönergesi oluşturduğumuzda, direktifin kapsamı İzole kapsamda olabilir, direktifin denetleyiciyle bir kapsam paylaşmadığı anlamına gelir; hem direktif hem de kontrolör kendi kapsamına sahiptir. Ancak, veriler direktif kapsamına üç olası yolla aktarılabilir.

1. Veri @dizgi değişmezi, geçirme dizesi değeri, tek yönlü bağlama kullanılarak bir dize olarak geçirilebilir .
2. Veri =değişmez dize kullanılarak bir nesne olarak geçirilebilir , nesneyi bağlayabilir, 2 yolla bağlanabilir.
3. Veriler bir işlev olarak geçirilebilir &dize hazır bilgi, harici işlevi çağırır, verileri direktiften denetleyiciye geçirebilir.

Direktifleri üzerine angularjs dokümantasyon oldukça iyi sembollerin anlamlarını için yazılmıştır.

Açık olmak gerekirse, sadece

scope: '@'

direktif tanımında. Aşağıdaki gibi, bu bağlantıların uygulanacağı özelliklere sahip olmanız gerekir:

scope: {
    myProperty: '@'
}

Sitedeki belgeleri ve eğiticileri okumanızı önemle tavsiye ederim. Yalıtılmış kapsamlar ve diğer konular hakkında bilmeniz gereken çok daha fazla bilgi var.

Aşağıda bağlantılı sayfadan, değerleri ile ilgili doğrudan bir alıntı scope:

Scope özelliği true, bir nesne veya bir falsy değeri olabilir:

• falsy : Yönerge için kapsam oluşturulmayacak. Direktif ebeveyninin kapsamını kullanacaktır.

• true: Direktifin öğesi için üst öğesinden prototip olarak miras alan yeni bir alt kapsam oluşturulacaktır. Aynı öğedeki birden çok yönerge yeni bir kapsam isterse, yalnızca bir yeni kapsam oluşturulur. Şablonun kökü her zaman yeni bir kapsam aldığından, yeni kapsam kuralı şablonun kökü için geçerli değildir.

• {...} (bir nesne karması) : Yönergenin öğesi için yeni bir "ayır" kapsamı oluşturulur. 'İzole' kapsamı, ana kapsamından prototipik olarak miras kalmaması nedeniyle normal kapsamdan farklıdır. Bu, üst kapsamdaki verileri yanlışlıkla okumaması veya değiştirmemesi gereken yeniden kullanılabilir bileşenler oluştururken yararlıdır.

^{2017-02-13, https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope- adresinden , CC-by-SA 3.0 olarak lisanslanmıştır.}

AngularJS 1.6'daki sembollerden herhangi biriyle bir değer bağlama konusunda sorun yaşadım. Ben hiçbir undefinedişe yaramadı aynı dosyadaki diğer bağlamalar ile aynı şekilde yaptım rağmen , hiç bir değer alamadım .

Sorun şuydu: Değişken adımın alt çizgisi vardı.

Bu başarısız olur:

bindings: { import_nr: '='}

Bu çalışıyor:

bindings: { importnr: '='}

(Orijinal soru ile tamamen ilgili değil, ancak baktığımda en iyi arama sonuçlarından biriydi, umarım bu aynı sorunu olan birine yardımcı olur.)