Jaka jest różnica między ' @ ' i ' = ' w zakresie dyrektywy w AngularJS?

Jest tu wiele świetnych odpowiedzi, ale chciałbym przedstawić moją perspektywę na różnice między @, =, i & wiązania, które okazały się dla mnie przydatne.

Wszystkie trzy powiązania są sposobami przekazywania danych z zakresu nadrzędnego do izolowanego zakresu dyrektywy poprzez atrybuty elementu:

1. @ Wiązanie służy do przekazywania strun. Łańcuchy te obsługują wyrażenia {{}} dla wartości interpolowanych. Na przykład: . Interpolowane wyrażenie jest oceniane na podstawie zakres nadrzędny dyrektywy.

2. = Wiązanie jest dla modelu dwukierunkowego wiązania. Model w zakresie nadrzędnym jest powiązany z Modelem w odosobnionym zakresie dyrektywy. Zmiany w jeden model wpływa na drugi i vice versa.

3. & wiążąca jest przeniesienie metody do zakresu dyrektywy tak, aby może być wywołana w Twojej dyrektywie. Metoda jest wstępnie związana z nadrzędny zakres dyrektywy i wspiera argumenty. Na przykład jeżeli metoda jest hello (name) w zakresie rodzica, to w aby wykonać metodę z wewnątrz Twojej dyrektywy, musisz call $scope.hello ({name: 'world'})

Uważam, że łatwiej jest zapamiętać te różnice, odwołując się do wiązań zakresu krótszym opisem:

• @ atrybut string binding
• = Model dwukierunkowy oprawa
• & Wiązanie metody wywołania zwrotnego

Symbole wyjaśniają również, co zmienna scope reprezentuje wewnątrz implementacji dyrektywy:

• @ string
• = model
• & metoda

W kolejności przydatności (dla mnie tak czy inaczej):

1. =
2. @
3. &

= oznacza wiązanie dwukierunkowe, a więc odniesienie do zmiennej do zakresu nadrzędnego. Oznacza to, że gdy zmienisz zmienną w dyrektywie, zmieni się ona również w zakresie nadrzędnym.

@ oznacza, że zmienna zostanie skopiowana (sklonowana) do dyrektywy.

Jeśli chcesz zmienić kilka zmiennych w zakresie nadrzędnym, możesz wykonać funkcję w zakresie nadrzędnym z poziomu dyrektywy (lub przekazać dane za pośrednictwem usługi).

Jeśli chcesz zobaczyć więcej, Jak to działa z żywym przykładem. 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>"
    };
});

@ get as string

• to nie tworzy żadnych powiązań. Po prostu otrzymujesz słowo, które podałeś jako ciąg znaków

= 2 sposób wiązania

• zmiany wprowadzone przez Administratora będą odzwierciedlone w odniesieniach zawartych w dyrektywie i odwrotnie

& zachowuje się to nieco inaczej, ponieważ scope otrzymuje funkcję, która zwraca obiekt przekazany w. Zakładam, że to było konieczne, aby to zadziałało. skrzypce powinny to wyjaśnić.

• po wywołaniu tej funkcji getter, wynikowy obiekt zachowuje się następująco:
  • if a function was passed: then the function is executed in the parent (controller) closure when called
  • jeśli nie-Funkcja została przekazana: po prostu uzyskaj lokalną kopię obiektu, który nie ma powiązań

to skrzypce powinny wykazać jak one działają . Zwróć szczególną uwagę na funkcje scope z get... w nazwie, aby mam nadzieję lepiej zrozumieć, co mam na myśli o &

Istnieją trzy sposoby dodania zakresu dyrektywy:

1. zakres nadrzędny : jest to domyślne dziedziczenie zakresu.

Zakres dyrektywy i jej nadrzędnego(kontrolera/dyrektywy, w której się znajduje) jest taki sam. Tak więc wszelkie zmiany wprowadzone do zmiennych scope wewnątrz dyrektywy są również odzwierciedlane w kontrolerze nadrzędnym. Nie musisz tego określać, ponieważ jest to wartość domyślna.

1. zakres dziecka : dyrektywa tworzy zakres dziecka, który dziedziczy z zakresu nadrzędnego, jeśli zmienna scope dyrektywy zostanie określona jako true.

Tutaj, jeśli zmienisz zmienne scope wewnątrz dyrektywy, nie będzie ona odzwierciedlać w zakresie nadrzędnym, ale jeśli zmienisz właściwość zmiennej scope, która jest odzwierciedlona w zakresie nadrzędnym, ponieważ zmieniłeś zmienną scope rodzica.

Przykład,

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

1. zakres izolowany : jest używany, gdy chcesz utworzyć zakres, który nie dziedziczy z zakresu kontrolera.

Dzieje się tak, gdy tworzysz WTYCZKI, ponieważ sprawia to, że dyrektywa jest ogólna, ponieważ może być umieszczona w dowolnym HTML i nie ma wpływu na jej nadrzędny zakres.

Teraz, jeśli nie chcesz żadnej interakcji z nadrzędnym zakresem, możesz po prostu określić zakres jako pusty obiekt. jak,

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

W większości przypadków tak nie jest, ponieważ potrzebujemy interakcji z zakresem nadrzędnym, więc chcemy, aby niektóre wartości/ zmiany przeszły. Na z tego powodu używamy:

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

@ oznacza to, że zmiany z zakresu kontrolera będą odzwierciedlone w zakresie dyrektywy, ale jeśli zmodyfikujesz wartość w zakresie dyrektywy, zmienna zakresu kontrolera nie zostanie zmieniona.

= jest dwukierunkowa, więc jeśli zmienisz zmienna w zakresie dyrektywy, zmienna zakresu kontrolera również ulega wpływowi

& jest używana do wiązania metody scope kontrolera tak, że w razie potrzeby możemy ją wywołać z dyrektywy

Zaletą jest to, że nazwa zmiennej nie musi być taka sama w zakresie kontrolera i zakresu dyrektywy.

Przykład, zakres dyrektywy ma zmienną "dirVar", która synchronizuje się ze zmienną" contVar " zakresu kontrolera. Daje to dużą moc i uogólnienie na dyrektywa jako jeden kontroler może synchronizować się ze zmienną v1, podczas gdy inny kontroler korzystający z tej samej dyrektywy może poprosić dirVar o synchronizację ze zmienną v2.

Poniżej przykład użycia:

Dyrektywa i kontroler to:

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

I html (zwróć uwagę na różnice dla @ i=):

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

Oto link do bloga, który ładnie to opisuje.

Po prostu możemy użyć: -

1. @ :- dla wartości łańcuchowych dla jednokierunkowego powiązania danych. w jeden sposób powiązanie danych można przekazać tylko wartość zakresu do dyrektywy

2. = :- dla wartości obiektu dla dwukierunkowego powiązania danych. w dwukierunkowym powiązaniu danych można zmienić wartość zakresu w dyrektywie, jak również w html.

3. & :- dla metod i funkcji.

Edytuj

W naszejskładowej definicji dla Wersja kątowa 1.5 i powyżej
istnieją cztery różne rodzaje wiązań:

1. = dwukierunkowe powiązanie danych: - jeśli zmienimy wartość, automatycznie zaktualizuje się

2. < One way binding: - gdy chcemy tylko odczytać parametr z zakresu nadrzędnego i nie aktualizować go.

3. @ to jest dla parametrów ciągu

4. & to jest dla wywołań zwrotnych W przypadku, gdy twój komponent musi wyjść something to its parent scope

Stworzyłem mały plik HTML, który zawiera kod kątowy demonstrujący różnice między nimi:

<!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>

To pytanie zostało już pobite na śmierć, ale i tak podzielę się tym na wypadek, gdyby ktoś inny zmagał się z okropnym bałaganem, jakim są lunety AngularJS. Obejmuje to =, <, @, & i ::. Pełny zapis można znaleźć tutaj .

= ustanawia Wiązanie dwukierunkowe. Zmiana właściwości w rodzicu spowoduje zmianę w dziecku i odwrotnie.

< ustanawia Wiązanie jednokierunkowe, rodzic za dziecko. Zmiana właściwości rodzica spowoduje zmianę właściwości potomka, ale zmiana właściwości potomka nie wpłynie na właściwość rodzica.

@ przypisze właściwościowi child wartość łańcuchową atrybutu tag. Jeśli atrybut zawiera wyrażenie , właściwość podrzędna aktualizuje się za każdym razem, gdy wyrażenie zostanie obliczone na inny łańcuch znaków. Na przykład:

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

bindings: {
    description: '@', 
}

Tutaj właściwość description w zakresie potomnym będzie bieżącą wartością wyrażenia "The movie title is {{$ctrl.movie.title}}", gdzie movie jest obiektem w zakresie nadrzędnym.

& jest to trochę trudne, a w rzeczywistości wydaje się, że nie ma żadnego przekonującego powodu, aby go kiedykolwiek używać. Pozwala na ocenę wyrażenia w zakresie nadrzędnym, zastępując parametry zmiennymi z zakresu podrzędnego. Przykład (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'
  }
});

Podane parentVar=10, wyrażenie parentFoo({myVar:5, myOtherVar:'xyz'}) zostanie ocenione na 5 + 10 + 'xyz', a komponent wyrenderuje się jako:

<div>15xyz</div>

Kiedy czy kiedykolwiek chcesz korzystać z tej skomplikowanej funkcjonalności? & jest często używany przez ludzi, aby przekazać do zakresu dziecka funkcję zwrotną w zakresie rodzica. W rzeczywistości jednak ten sam efekt można uzyskać, używając '{myVar:5, myOtherVar:'xyz'}). Rozważyć:

Wywołanie zwrotne za pomocą &:

<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: '&'
  }
});

Wywołanie zwrotne za pomocą <:

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

Zauważ, że obiekty (i tablice) są przekazywane przez odniesienie do zakresu potomnego, a nie kopiowane. oznacza to, że nawet jeśli jest to Wiązanie jednokierunkowe, pracujesz z tym samym obiektem zarówno w zakresie nadrzędnym, jak i podrzędnym.

Aby zobaczyć różne prefiksy w akcji, otwórz ten plunk .

[oficjalne dokumenty]
Późniejsze wersje AngularJS wprowadzają opcję jednorazowego wiązania, gdzie właściwość child scope jest aktualizacja tylko raz. Poprawia to wydajność, eliminując potrzebę oglądania właściwości nadrzędnej. Składnia jest inna niż powyżej; aby zadeklarować jednorazowe powiązanie, dodaj :: przed wyrażeniem w znaczniku component :

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

Będzie to propagować wartość tagline do zakresu potomnego bez ustanawiania wiązania jednokierunkowego lub dwukierunkowego. Uwaga : jeśli tagline jest początkowo undefined w zakresie nadrzędnym, angular będzie go obserwował, dopóki się nie zmieni, a następnie zrobi Jednorazowa aktualizacja odpowiedniej właściwości w zakresie potomnym.

Podsumowanie

Poniższa tabela pokazuje, jak działają prefiksy w zależności od tego, czy właściwość jest obiektem, tablicą, łańcuchem znaków, itd.

The = way to Wiązanie dwukierunkowe, które pozwala na wprowadzenie zmian na żywo wewnątrz Twojej dyrektywy. Gdy ktoś zmieni tę zmienną poza dyrektywą, będziesz miał te zmienione dane wewnątrz Twojej dyrektywy, ale @ Droga nie jest wiązaniem dwukierunkowym . Działa jak Tekst . Wiążesz raz, a będziesz miał tylko jego wartość.

Aby uzyskać to jaśniej, możesz użyć tego wspaniałego artykułu:

Zakres dyrektywy AngularJS " @ " oraz '='

@ właściwość local scope służy do dostępu do wartości łańcuchowych zdefiniowanych poza dyrektywą.

= w przypadkach, gdy trzeba utworzyć dwukierunkowe powiązanie pomiędzy zewnętrznym zakresem a izolowanym zakresem dyrektywy, można użyć znaku=.

& local scope property pozwala konsumentowi dyrektywy przekazać funkcję, którą dyrektywa może wywołać.

Prosimy sprawdzić poniższy link, który daje jasne zrozumienie z przykładami.I uważam, że to naprawdę bardzo przydatne, więc pomyślałem o udostępnieniu go.

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

Nawet jeśli zakres jest lokalny, jak w twoim przykładzie, możesz uzyskać dostęp do zakresu nadrzędnego poprzez Właściwość $parent. Załóżmy w poniższym kodzie, że title jest zdefiniowane w zakresie nadrzędnym. Następnie możesz uzyskać dostęp do tytułu jako $parent.title:

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

Jednak w większości przypadków ten sam efekt jest lepiej uzyskany przy użyciu atrybutów.

Przykład, gdzie znalazłem notację"&", która jest używana" do przekazywania danych z izolowanego zakresu przez wyrażenie i do zakresu nadrzędnego", przydatna (i dwukierunkowa nie można było użyć databindingu) było w dyrektywie do renderowania specjalnej struktury danych wewnątrz ng-repeat.

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

Jedną z części renderowania był przycisk delete i tutaj przydatne było dołączenie funkcji deletefunction z zewnętrznego zakresu poprzez &. Wewnątrz dyrektywy render wygląda to tak:

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

Dwukierunkowe databindowanie tzn. data = "=" nie może być użyte, ponieważ funkcja delete będzie działać w każdym cyklu $digest, co nie jest dobre, ponieważ rekord jest natychmiast usuwany i nigdy renderowane.

Zaimplementowałem wszystkie możliwe opcje w fiddle.

Dotyczy wszystkich opcji:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

Https://jsfiddle.net/rishulmatta/v7xf2ujm

Główna różnica między nimi jest po prostu

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

@ i = Zobacz inne odpowiedzi.

One gotcha o &
TL; DR;
& pobiera z rodzica wyrażenie (nie tylko funkcję jak w przykładach w innych odpowiedziach) i ustawia ją jako funkcję w dyrektywie, która wywołuje wyrażenie. Funkcja ta może zastąpić dowolną zmienną (nawet nazwę funkcji) wyrażenia, przekazując obiekt ze zmiennymi.

Explained
& jest odniesieniem do wyrażenia, to znaczy, że jeśli zdasz coś takiego jak <myDirective expr="x==y"></myDirective>
w dyrektywie ta expr będzie funkcją, która wywołuje wyrażenie, jak:
function expr(){return x == y}.
tak więc w dyrektywie html <button ng-click="expr()"></button> wywoła wyrażenie. W js dyrektywy po prostu $scope.expr() wywoła również wyrażenie.
Wyrażenie zostanie wywołane z $scope.X i $scope.y rodzica.
Masz możliwość nadpisania parametrów!
Jeśli je ustawisz przez wywołanie, np. <button ng-click="expr({x:5})"></button>
następnie wyrażenie zostanie wywołane z parametrem x i parametrem rodzica y.
Możesz obejść oba.
Teraz już wiesz, dlaczego <button ng-click="functionFromParent({x:5})"></button> Działa.
Ponieważ po prostu wywołuje wyrażenie rodzica (np. <myDirective functionFromParent="function1(x)"></myDirective>) i zastępuje możliwe wartości określonymi parametrami, w tym przypadku x.
może być:
<myDirective functionFromParent="function1(x) + 5"></myDirective>
lub
<myDirective functionFromParent="function1(x) + z"></myDirective>
z dzieckiem na Telefon:
<button ng-click="functionFromParent({x:5, z: 4})"></button>.
lub nawet z wymianą funkcji:
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.

To po prostu wyrażenie, nie ma znaczenia, czy jest to funkcja, czy wiele funkcji, czy tylko porównanie. I możesz zastąpić dowolną zmienną tego wyrażenia.

Przykłady:
szablon dyrektywy a kod wywołany:
rodzic ma zdefiniowaną wartość $scope.x, $scope.y:
szablon nadrzędny: <myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button> połączenia $scope.x==$scope.y
<button ng-click="expr({x: 5})"></button> połączenia 5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button> połączenia 5 == 6

rodzic ma zdefiniowaną wartość $scope.function 1, $ scope.x, $scope.y:
rodzic szablon: <myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button> połączenia $scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button> połączenia $scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button> połączenia $scope.function1(5) + 6
dyrektywa ma $scope.myFn jako funkcja:
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> połączenia $scope.myFn(5) + 6

Dlaczego muszę używać "{{title}} " z ' @ ' i "title " z'='?

Gdy użyjesz {{title}}, tylko nadrzędna wartość zakresu zostanie przekazana do widoku dyrektywy i oceniona. Jest to ograniczone do jednego sposobu, co oznacza, że zmiana nie będzie odzwierciedlona w zakresie nadrzędnym. Możesz użyć'=', gdy chcesz również odzwierciedlić zmiany wprowadzone w dyrektywie child w zakresie rodzica. To jest dwukierunkowe.

Czy Mogę również uzyskać bezpośredni dostęp do zakresu nadrzędnego, bez dekorowania mojego element z atrybutem?

Gdy dyrektywa ma w sobie atrybut scope (scope: {}), wtedy nie będziesz już mógł uzyskać bezpośredniego dostępu do nadrzędnego scope. Ale nadal można uzyskać do niego dostęp poprzez scope.$rodzic itp. Jeśli usuniesz zakres z dyrektywy, będzie on dostępny bezpośrednio.

Dokumentacja mówi: "często pożądane jest przekazywanie danych z izolowany Zakres przez wyrażenie i do zakresu nadrzędnego", ale że wydaje się, że działa dobrze z wiązaniem dwukierunkowym. Dlaczego czy droga ekspresji będzie lepsza?

To zależy od kontekstu. Jeśli chcesz wywołać wyrażenie lub funkcję z danymi, użyj &, a jeśli chcesz udostępnić dane, możesz użyć biderectional way używając '= '

Różnice pomiędzy różnymi sposobami przekazywania danych do dyrektywy można znaleźć pod poniższym linkiem:

AngularJS - isolated Scopes - @ vs = vs &

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

@ attribute string binding (one way) = Dwukierunkowe Wiązanie modelu & Wiązanie metody wywołania zwrotnego

@ wiąże właściwość local/directive scope z ocenianą wartością atrybutu DOM. = wiąże właściwość local / directive scope z nadrzędną właściwością scope. & Wiązanie polega na przekazaniu metody do zakresu dyrektywy, tak aby mogła zostać wywołana w ramach dyrektywy.

@ atrybut string binding = Dwukierunkowe Wiązanie modelu & Wiązanie metody wywołania zwrotnego