AngularJS yönergesi kapsamında '@' ve '=' arasındaki fark nedir?

Konuyla ilgili AngularJS belgelerini dikkatlice okudum ve sonra bir direktifle uğraştım . İşte keman .

İşte bazı alakalı snippet'ler:

• Gönderen HTML :

  <pane bi-title="title" title="{{title}}">{{text}}</pane>

• Bölme yönergesinden:

  scope: { biTitle: '=', title: '@', bar: '=' },

Elimde olmayan birkaç şey var:

• Neden kullanmak zorunda "{{title}}"olan '@'ve "title"birlikte '='?
• Ayrıca öğemi bir nitelikle süslemeden doğrudan ana kapsama da erişebilir miyim?
• Dokümantasyonda, "Genellikle izole kapsamdan ifade yoluyla ve ana kapsama veri aktarılması arzu edilir" diyor , ancak bu da çift yönlü bağlanma ile iyi çalışıyor gibi görünüyor. İfade yolu neden daha iyi olur?

İfade çözümünü de gösteren başka bir keman buldum: http://jsfiddle.net/maxisam/QrCXh/

Neden " @ " ile "{{title}}" ve " = " ile "title" kullanmam gerekiyor ?

@ , bir yerel / yönerge kapsamı özelliğini DOM özelliğinin değerlendirilen değerine bağlar . Ya title=title1da kullanırsanız title="title1", DOM başlığı "title" değeri basitçe dizedir title1. Eğer kullanırsanız title="{{title}}", DOM başlığı "title" değeri enterpolasyonlu değerdir {{title}}, bu nedenle dize şu anda "title" olarak ayarlanmış olan üst kapsam özelliği olacaktır. Özellik değerleri her zaman dize olduğundan, @ kullanırken her zaman yönerge kapsamındaki bu özellik için bir dize değeri elde edersiniz. .

= bir yerel / yönerge kapsamı özelliğini bir üst kapsam özelliğine bağlar . Bu nedenle = ile , DOM özelliğinin değeri olarak üst model / scope özellik adını kullanırsınız. = İle {{}}s kullanamazsınız .

@ İle title="{{title}} and then some"- {{title}} enterpolasyonlu, sonra "ve bazı" dizeleri onunla birleştirilir. Nihai birleştirilmiş dize, local / yönerimli kapsam özelliğinin aldığı şeydir. (Bunu = , yalnızca @ ile yapamazsınız .)

@ İle , attr.$observe('title', function(value) { ... })link (ing) fonksiyonunuzdaki değeri kullanmanız gerekiyorsa kullanmanız gerekecektir. Örneğin, if(scope.title == "...")beklediğiniz gibi çalışmaz. Bunun, bu özelliğe yalnızca eşzamansız olarak erişebileceğiniz anlamına geldiğini unutmayın . Yalnızca şablondaki değeri kullanıyorsanız $ observe () kullanmanız gerekmez. Ör template: '<div>{{title}}</div>'.

= İle $ observe kullanmanıza gerek yoktur.

Ayrıca öğemi bir nitelikle süslemeden doğrudan ana kapsama da erişebilir miyim?

Evet, ancak yalnızca ayrı bir kapsam kullanmıyorsanız. Bu satırı direktifinizden kaldırın

scope: { ... }

ve sonra direktifiniz yeni bir kapsam oluşturmayacaktır. Üst kapsamı kullanır. Daha sonra tüm üst kapsam özelliklerine doğrudan erişebilirsiniz.

Dokümantasyonda, "Genellikle, izole edilen kapsamdan bir ifade ve ana kapsama veri aktarılması arzu edilir" diyor, ancak bu, çift yönlü bağlamayla da iyi çalışıyor gibi görünüyor. İfade yolu neden daha iyi olur?

Evet, çift yönlü ciltleme yerel / yönerge kapsamının ve üst kapsamın veri paylaşmasına izin verir. "İfade bağlama", yönerge bir DOM özelliği tarafından tanımlanan bir ifadeyi (veya işlevi) çağırmaya izin verir - ayrıca ifadeye veya işleve bağımsız değişken olarak veri iletebilirsiniz. Dolayısıyla, verileri üst öğeyle paylaşmanız gerekmiyorsa - yalnızca üst kapsamda tanımlanan bir işlevi çağırmak istersiniz - & sözdizimini kullanabilirsiniz .

Ayrıca bakınız

• Lukas'ın yalıtılmış kapsam blog yazısı (@, =, & 'ı kapsar)
• dnc253'in @ ve = açıklaması
• kapsamlar hakkındaki blog benzeri yanıtım - yönergeler bölümü (en altta, Özet bölümünden hemen önce) ayrı bir kapsamın resmi ve ana kapsamı var - yönerge kapsamı bir özellik için @, diğeri için = kullanır
• AngularJS'de & vs @ ve = arasındaki fark nedir

Orada büyük yanıtlar burada bir sürü var ama arasındaki farklar hakkında benim bakış açısı sunmak istiyorum @, =ve &bağlayıcı benim için yararlı olduğunu kanıtladı.

Üç bağlamanın tümü, öğenin öznitelikleri aracılığıyla üst kapsamınızdan direktifinizin yalıtılmış kapsamına veri aktarmanın yollarıdır:

1. @ ciltleme dizeleri içindir. Bu dizeler {{}}enterpolasyonlu değerler için ifadeleri destekler . Örneğin: . Enterpolasyonlu ifade, direktifin ana kapsamına göre değerlendirilir.

2. = ciltleme iki yönlü model ciltleme içindir. Ana kapsamdaki model, direktifin yalıtılmış kapsamındaki modele bağlıdır. Bir modeldeki değişiklikler diğerini etkiler, ya da tam tersi.

3. & ciltleme, yönerge kapsamınızda çağrılabilmesi için yöntemin kapsamına bir yöntem geçirmektir. Yöntem, direktifin üst kapsamına önceden bağlıdır ve bağımsız değişkenleri destekler. Örneğin, yöntem üst kapsamda merhaba (ad) ise, yönerge içinden yöntemi uygulamak için $ scope.hello ({name: 'world'}) öğesini çağırmalısınız.

Daha kısa bir tanımla kapsam bağlarına başvurarak bu farkları hatırlamanın daha kolay olduğunu düşünüyorum:

• @ Özellik dizesi bağlama
• = İki yönlü model bağlama
• & Geri arama yöntemi bağlama

Semboller ayrıca, yönerge uygulamanızın kapsam değişkeninin neyi temsil ettiğini de netleştirir:

• @ sicim
• = model
• & yöntem

Yararlılık sırasına göre (yine de benim için):

1. =
2. @
3. &

=Aracı çift yönlü bağlama, yani üst kapsamına bir değişken için bir başvuru. Bu, yönergede değişkeni değiştirdiğinizde değişkenin üst kapsamda da değişeceği anlamına gelir.

@ değişkenin direktife kopyalanacağı (klonlanacağı) anlamına gelir.

Bildiğim kadarıyla da <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>çalışmalı. bi-titleyönergede değiştirilebilir üst kapsam değişkeni değerini alır.

Üst kapsamda birden çok değişkeni değiştirmeniz gerekirse, yönerge içinden üst kapsamda bir işlev yürütebilirsiniz (veya bir hizmet aracılığıyla veri iletebilirsiniz).

Bunun canlı bir örnekle nasıl çalıştığını daha fazla görmek istiyorsanız. http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

@ dize olarak al

• Bu herhangi bir bağlantı oluşturmaz. Basitçe dize olarak geçtiğiniz kelimeyi alıyorsunuz

= 2 yollu ciltleme

• kontrolörden yapılan değişiklikler direktif tarafından tutulan referansa yansıtılacaktır.

&Kapsam , iletilen nesneyi döndüren bir işlev aldığından, bu biraz farklı davranır . Bunun çalışması için gerekli olduğunu düşünüyorum. Keman bunu açıklığa kavuşturmalıdır.

• Bu alıcı işlevini çağırdıktan sonra, ortaya çıkan nesne aşağıdaki gibi davranır:
  • bir işlev iletildiyse: işlev çağrıldığında üst (denetleyici) kapağında yürütülür
  • bir işlev aktarılmadıysa: nesnenin bağlama içermeyen yerel bir kopyasını almanız yeterlidir

Bu keman nasıl çalıştıklarını göstermelidir . get...Ne demek istediğimi daha iyi anlamak için, kapsamdaki işlevlere özellikle dikkat edin&

Direktifte kapsamın eklenmesinin üç yolu vardır:

1. Ana kapsam : Bu varsayılan kapsam devralmadır.

Yönerge ve üst öğesi (içinde bulunduğu denetleyici / yönerge) kapsamı aynıdır. Dolayısıyla direktif içindeki kapsam değişkenlerinde yapılan değişiklikler ana denetleyiciye de yansıtılır. Bunu varsayılan olarak belirtmeniz gerekmez.

2. Alt kapsam : yönerge, yönerge kapsam değişkenini true olarak belirtirseniz üst kapsamdan miras alan bir alt kapsam oluşturur.

Burada, yönerge içindeki kapsam değişkenlerini değiştirirseniz, üst kapsamda yansıtılmaz, ancak üst değişkenin kapsam değişkenini gerçekten değiştirdiğiniz için, kapsam değişkeninin özelliğini değiştirirseniz, üst kapsamda yansıtılır. .

Misal,

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

3. Yalıtılmış kapsam : Bu, denetleyici kapsamından miras almayan bir kapsam oluşturmak istediğinizde kullanılır.

Bu, herhangi bir HTML'ye yerleştirilebildiği ve üst kapsamından etkilenmediği için yönerge genel olduğu için eklentiler oluşturduğunuzda olur.

Şimdi, üst kapsamla herhangi bir etkileşim istemiyorsanız, kapsamı yalnızca boş bir nesne olarak belirtebilirsiniz. sevmek,

scope: {} //this does not interact with the parent scope in any way

Çoğunlukla durum böyle değildir, çünkü üst kapsamla biraz etkileşime ihtiyacımız var, bu nedenle bazı değerlerin / değişikliklerin geçmesini istiyoruz. Bu nedenle şunları kullanıyoruz:

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@ , denetleyici kapsamındaki değişikliklerin yönerge kapsamına yansıtılacağı anlamına gelir, ancak yönerge kapsamındaki değeri değiştirirseniz, denetleyici kapsam değişkeni etkilenmez.

@ her zaman eşlenen özniteliğin bir ifade olmasını bekler. Bu çok önemli; çünkü “@” önekinin çalışması için özellik değerini {{}} içine sarmamız gerekiyor.

= çift ​​yönlü olduğundan, yönerge kapsamındaki değişkeni değiştirirseniz denetleyici kapsam değişkeni de etkilenir

& gerekirse denetleyici kapsam yöntemini bağlamak için kullanılır, böylece gerekirse yönergeden çağırabiliriz

Buradaki avantaj, değişkenin adının kontrolör kapsamı ve yönerge kapsamı ile aynı olması gerekmemesidir.

Örnekte, yönerge kapsamı, denetleyici kapsamının "contVar" değişkeni ile eşitlenen bir "dirVar" değişkenine sahiptir. Aynı denetleyiciyi kullanan başka bir denetleyici dirVar'dan v2 değişkeni ile eşitlenmesini isteyebilir, bu da bir denetleyicinin v1 değişkeni ile eşitlenebilmesi nedeniyle yönerge için çok fazla güç ve genelleme sağlar.

Kullanım örneği aşağıdadır:

Yönerge ve denetleyici:

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

Ve html (@ ve = için farklılığa dikkat edin):

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

İşte blog'u güzel anlatan bir bağlantı .

Sadece kullanabiliriz: -

1. @ : - Tek yönlü Dize değerleri için Veri bağlama. tek yönlü veri bağlama sadece kapsam değerini direktiflere aktarabilirsiniz

2. = : - iki yönlü veri bağlama için nesne değeri için. iki yönlü veri bağlama ile direktifte olduğu kadar html'de de kapsam değerini değiştirebilirsiniz.

3. & : - yöntemler ve fonksiyonlar için.

DÜZENLE

Bizim de Bileşen için tanım Açısal sürüm 1.5 Ve yukarıdaki
bağları dört farklı tip vardır:

1. = İki yönlü veri bağlama : - değeri değiştirirsek, otomatik olarak güncellenir

2. < tek yönlü ciltleme : - sadece bir üst kapsamdan bir parametre okumak ve güncellemek istemediğimizde.

3. @bu Dize Parametreleri içindir

4. &bu, bileşeninizin ana kapsamına bir şey çıkarması gerektiğinde Geri Aramalar içindir

Aralarındaki farkları gösteren Açısal kod içeren küçük bir HTML dosyası oluşturdum:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

= Yoludur bağlayıcı 2 yönlü sahip olmak sağlar, canlı senin direktifi iç değişiklikler. Birisi bu değişkeni yönerge dışında değiştirdiğinde, bu yönerge içindeki verileri değiştirmiş olursunuz, ancak @ way iki yönlü bağlayıcı değildir . Metin gibi çalışır . Bir kez bağlarsınız ve sadece değerine sahip olursunuz.

Daha açık bir şekilde elde etmek için bu harika makaleyi kullanabilirsiniz:

AngularJS Direktifi Kapsamı '@' ve '='

Bu soru çoktan dövüldü, ama yine de AngularJS kapsamları olan korkunç karışıklık ile mücadele ederse bunu paylaşacağım. Bu irade kapak =, <, @, &ve ::. Tam yazımı burada bulabilirsiniz .

=iki yönlü bir bağ kurar. Üst öğedeki mülkün değiştirilmesi, alt öğede değişikliğe neden olur veya bunun tersi de geçerlidir.

<ebeveynten çocuğa tek yönlü bir bağ kurar. Üst öğedeki özelliğin değiştirilmesi alt öğede değişikliğe neden olur, ancak alt özelliğinin değiştirilmesi üst özelliği etkilemez.

@child özelliğine tag özelliğinin dize değerini atar. Özellik bir ifade içeriyorsa, ifade farklı bir dizeye her değerlendirildiğinde child özelliği güncellenir. Örneğin:

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

Burada, descriptionalt kapsamdaki özellik , üst kapsamdaki bir nesnenin "The movie title is {{$ctrl.movie.title}}"olduğu ifadenin geçerli değeri olacaktır movie.

&biraz zor ve aslında kullanmak için zorlayıcı bir neden yok gibi görünüyor. Parametreleri alt kapsamdaki değişkenlerle değiştirerek üst kapsamdaki bir ifadeyi değerlendirmenizi sağlar. Bir örnek ( plunk ):

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

Verilen parentVar=10, ifade olarak parentFoo({myVar:5, myOtherVar:'xyz'})değerlendirilir 5 + 10 + 'xyz've bileşen şu şekilde oluşturulur:

<div>15xyz</div>

Bu kıvrımlı işlevselliği ne zaman kullanmak istersiniz? &genellikle kişiler tarafından alt kapsama geçmek için kullanılır ve üst kapsamdaki bir geri çağırma işlevi kullanılır. Bununla birlikte, gerçekte, aynı etki daha basit olan ve parametrelerin geçmesi için garip kıvırcık parantez sözdizimini önleyen '<' kullanılarak da elde edilebilir {myVar:5, myOtherVar:'xyz'}. Düşünmek:

Şunu kullanarak geri arama &:

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

Şunu kullanarak geri arama <:

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

Nesnelerin (ve dizilerin) kopyalanmayan alt kapsamı referans alınarak iletildiğini unutmayın. Bunun anlamı, tek yönlü bir bağlama olsa bile, hem üst hem de alt kapsamda aynı nesne ile çalışıyorsunuzdur.

Bu açın eylem farklı önekleri görmek için Düşmek .

[Resmi dokümanlar]
AngularJS'nin sonraki sürümlerinde, child scope özelliğinin yalnızca bir kez güncelleştirildiği tek seferlik bağlama seçeneği sunulur. Bu, üst mülkü izleme ihtiyacını ortadan kaldırarak performansı artırır. Sözdizimi yukarıdakinden farklıdır; bir kerelik bir bağlanma bildirmek ::için bileşen etiketindeki ifadenin önüne eklersiniz :

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

Bu, değerini taglinetek yönlü veya iki yönlü bir bağlantı oluşturmadan alt kapsamına yayar . Not : taglinebaşlangıçta undefinedüst kapsamdaysa, açısal değişene kadar izler ve alt kapsamda ilgili özelliğin bir kerelik güncellemesini yapar.

özet

Aşağıdaki tablo, özelliğin nesne, dizi, dize vb. Olmasına bağlı olarak öneklerin nasıl çalıştığını gösterir.

@ local scope özelliği, yönerge dışında tanımlanan dize değerlerine erişmek için kullanılır.

= Dış kapsam ile yönerge ayrı tutma kapsamı arasında iki yönlü bir bağlantı oluşturmanız gerektiğinde = karakterini kullanabilirsiniz.

& local scope özelliği, bir direktifin tüketicisinin direktifin çağırabileceği bir işlevi geçirmesini sağlar.

Lütfen örnekler ile net bir anlayış sağlayan aşağıdaki bağlantıyı kontrol edin.Bunu gerçekten çok yararlı buldum, bu yüzden paylaşmayı düşündüm.

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

Kapsam yerel olsa bile, örneğinizde olduğu gibi, özellik aracılığıyla üst kapsama erişebilirsiniz $parent. Aşağıdaki kodda title, üst kapsamda tanımlandığını varsayın . Daha sonra başlığa şu şekilde erişebilirsiniz $parent.title:

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

Ancak çoğu durumda öznitelikler kullanılarak aynı etki daha iyi elde edilir.

Yalıtılmış kapsamdan bir ifadeyle ve ana kapsama veri aktarmak için kullanılan "&" gösterimini bulduğum "bir örnek, yararlı (ve iki yönlü veri bağlama kullanılamadı) yönergesindeydi ng tekrarında özel bir veri yapısı oluşturmak için.

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

Oluşturmanın bir bölümü silme düğmesiydi ve burada & ile dış kapsamdan bir silme işlevi eklemek yararlıydı. Oluşturma yönergesinin içinde

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

data = "="Silme işlevi her $digestdöngüde çalışacağı için 2 yönlü veri bağlama kullanılamaz , bu da kayıt hemen silinip asla oluşturulmadığı için iyi değildir.

Olası tüm seçenekleri bir kemanda uyguladım.

Tüm seçeneklerle ilgilenir:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

aralarındaki temel fark sadece

@ Attribute string binding
= Two-way model binding
& Callback method binding

@ve =diğer cevaplara bakın.

Bir yakaladım hakkında DR; TL; bir üst öğeden ifade alır (yalnızca diğer yanıtlardaki örneklerde olduğu gibi değil) ve yönergede ifadeyi çağıran bir işlev olarak ayarlar. Ve bu işlev, bir nesneyi değişkenlerle geçirerek, ifadenin herhangi bir değişkenini (hatta işlev adı) değiştirme yeteneğine sahiptir . &

&

açıkladı
& , bu araçlar gibi bir şey bir ifade başvuru geçmesi durumunda <myDirective expr="x==y"></myDirective>
yönergede bu exprgibi ifadeyi çağıran bir işlev olacaktır:
function expr(){return x == y}.
yani direktifin html <button ng-click="expr()"></button>ifadesini çağırır. Direktif js sadece $scope.expr()ifade de çağırır.
İfade, üst öğenin $ scope.x ve $ scope.y ile çağrılır.
Parametreleri geçersiz kılabilirsiniz!
Bunları çağrı ile ayarlarsanız, örneğin <button ng-click="expr({x:5})"></button>
ifade parametreniz xve ebeveyninizin parametresi ile çağrılır y.
Her ikisini de geçersiz kılabilirsiniz.
Şimdi biliyorsunuz, neden <button ng-click="functionFromParent({x:5})"></button>çalışıyor.
Çünkü sadece ebeveynin ifadesini çağırır (ör.<myDirective functionFromParent="function1(x)"></myDirective>) ve olası değerleri, bu durumda belirttiğiniz parametrelerle değiştirir x.
bu olabilir:
<myDirective functionFromParent="function1(x) + 5"></myDirective>
ya
<myDirective functionFromParent="function1(x) + z"></myDirective>
çocuk çağrısıyla:
<button ng-click="functionFromParent({x:5, z: 4})"></button>.
hatta fonksiyon değiştirme ile:
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.

sadece bir ifade, bir işlev ya da birçok işlev ya da sadece karşılaştırma olması önemli değildir. Ve bu ifadenin herhangi bir değişkenini değiştirebilirsiniz .

Örnekler:
adı verilen bir kod vs yönerge şablonu:
: ebeveyn $ scope.x, $ scope.y tanımlamıştır
ebeveyn şablonu: <myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button>çağrılar $scope.x==$scope.y
<button ng-click="expr({x: 5})"></button>çağrılar 5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>çağrılar5 == 6

üst öğe $ scope.function1, $ scope.x, $ scope.y
öğesini tanımladı: üst şablon:<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>çağrılar $scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button>çağrılar $scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button>çağrılar $scope.function1(5) + 6
yönergesi fonksiyonu olarak $ scope.myFn vardır:
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> aramaları$scope.myFn(5) + 6

Neden "@" ile "{{title}}" ve "=" ile "title" kullanmam gerekiyor?

{{Title}} kullandığınızda, yalnızca üst kapsam değeri direktif görünümüne geçirilecek ve değerlendirilecektir. Bu tek bir yolla sınırlıdır, yani değişimin üst kapsama yansıtılmayacağı anlamına gelir. Çocuk yönergesinde yapılan değişiklikleri ebeveyn kapsamına da yansıtmak istediğinizde '=' kullanabilirsiniz. Bu iki yol.

Ayrıca öğemi bir nitelikle süslemeden doğrudan ana kapsama da erişebilir miyim?

Yönergede kapsam özelliği varsa (scope: {}), artık üst kapsama doğrudan erişemezsiniz. Ancak yine de kapsam üzerinden erişilebilir. $ Parent vb. Kapsamı direktiften kaldırırsanız, doğrudan erişilebilir.

Dokümantasyonda, "Genellikle, izole edilen kapsamdan bir ifade ve ana kapsama veri aktarılması arzu edilir" diyor, ancak bu, çift yönlü bağlamayla da iyi çalışıyor gibi görünüyor. İfade yolu neden daha iyi olur?

Bağlama göre değişir. Verilerle bir ifadeyi veya işlevi çağırmak istiyorsanız, & ifadesini kullanırsınız ve veri paylaşmak istiyorsanız, '=' kullanarak iki yönlü kullanabilirsiniz

Verileri direktife aktarmanın birden çok yolu arasındaki farkları aşağıdaki bağlantıda bulabilirsiniz:

AngularJS - İzole Kapsamlar - @ vs = vs &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ Özellik dizesi bağlama (tek yönlü) = İki yönlü model bağlama ve Geri arama yöntemi bağlama

@, bir yerel / yönerge kapsamı özelliğini DOM özelliğinin değerlendirilen değerine bağlar. = bir yerel / yönerge kapsamı özelliğini bir üst kapsam özelliğine bağlar. & ciltleme, yönerge kapsamınızda çağrılabilmesi için yöntemin kapsamına bir yöntem geçirmektir.

@ Özellik dizesi bağlama = İki yönlü model bağlama ve Geri arama yöntemi bağlama