Uso dei simboli '@', '&', '=' e '>' nel binding dell'ambito della direttiva personalizzata: AngularJS

Question

Ho letto molto sull'uso di questi simboli nell'implementazione di direttive personalizzate in AngularJS ma il concetto non è ancora chiaro per me. Voglio dire, cosa vuol dire se uso uno dei valori di scope nella direttiva personalizzata?

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

Che cosa stiamo facendo con lo scopo qui?

Non sono nemmeno sicuro se lo "ambito: '>'" esiste nella documentazione ufficiale o no. È stato usato nel mio progetto.

Edit-1

L'uso di "campo di applicazione: '>'" era un problema nel mio progetto e 'stato risolto.

Answer 1

In una direttiva AngularJS, l'ambito consente di accedere ai dati negli attributi dell'elemento a cui è applicata la direttiva.

Questo è illustrato meglio con un esempio:

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

e la definizione direttiva:

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

Quando la proprietà scope viene utilizzata la direttiva è in modalità cosiddetta "isolato portata", il che significa che non può accedere direttamente all'ambito del controllore genitore.

In termini molto semplici, il significato dei simboli di legame è:

someObject: '=' (dati bidirezionali vincolanti)

someString: '@' (passati direttamente o tramite interpolazione con doppie parentesi graffe notazione {{}})

someExpression: '&' (ad es.hideDialog())

Queste informazioni sono presenti nello AngularJS directive documentation page, anche se un po 'diffuse in tutta la pagina.

Il simbolo > non fa parte della sintassi.

Tuttavia, < esiste come parte di AngularJS component bindings e significa unidirezionale.

Answer 2

> non è nella documentazione.

< è per il collegamento unidirezionale.

@ associazione per il passaggio di stringhe. Queste stringhe supportano le espressioni {{}} per i valori interpolati.

= Il bind è per il bind modello a due vie. Il modello nell'oggetto principale è collegato al modello nell'ambito isolato della direttiva.

& associazione è per il passaggio di un metodo nell'ambito della direttiva in modo che possa essere chiamato all'interno della direttiva.

Quando impostiamo scope: true in directive, Angular js creerà un nuovo ambito per quella direttiva. Ciò significa che tutte le modifiche apportate all'ambito della direttiva non rifletteranno sul controller principale.

Answer 3

Il AngularJS documentation on directives è scritto bene per ciò che significano i simboli.

Per essere chiari, non si può semplicemente avere

scope: '@' 

in una definizione direttiva. È necessario disporre di proprietà per le quali si applicano le legature, come in:

scope: { 
    myProperty: '@' 
} 

vi consiglio caldamente di leggere la documentazione e tutorial sul sito. Vi sono molte più informazioni che è necessario conoscere su ambiti isolati e altri argomenti.

Ecco una citazione diretta dalla pagina di cui sopra-linked, per quanto riguarda i valori di scope:

La proprietà ambito può essere vero, un oggetto o un valore falsy:

• falsy: non verrà creato alcun ambito per la direttiva. La direttiva utilizzerà l'ambito dei suoi genitori.

• true: Un nuovo ambito figlio che prototipicamente eredita dal suo padre verrà creato per l'elemento della direttiva. Se più direttive sullo stesso elemento richiedono un nuovo ambito, viene creato solo un nuovo ambito. La nuova regola dell'ambito non si applica alla radice del modello poiché la radice del modello ottiene sempre un nuovo ambito.

• {...}(un oggetto hash): Un nuovo ambito "isolato" viene creato per l'elemento della direttiva. Lo scope 'isolate' differisce dall'ambito normale in quanto non eredita prototipicamente dal suo ambito genitore. Ciò è utile quando si creano componenti riutilizzabili, che non dovrebbero accidentalmente leggere o modificare i dati nell'ambito genitore.

^{Estratto 2017/02/13 da https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compilare # -scope-, concesso in licenza come CC-by-SA 3.0}

Answer 4

Quando creiamo una direttiva cliente, il campo di applicazione della direttiva potrebbe essere portata isolata , Significa che la direttiva non condivide un ambito con il controller; sia la direttiva che il controllore hanno il loro scopo. Tuttavia, i dati possono essere passati all'ambito della direttiva in tre modi possibili.

1. I dati possono essere passati come stringa utilizzando il valore letterale stringa @, valore stringa passata, collegamento unidirezionale.
2. I dati possono essere passati come oggetto utilizzando il valore letterale stringa =, oggetto pass, binding a 2 vie.
3. I dati possono essere passati come una funzione letterale stringa &, chiamate funzione esterna, possono passare i dati dalla direttiva al controller.

Answer 5

<: la funzione di legame

@::? Passare solo le stringhe