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

Ho letto molto sull'uso di questi simboli nell'implementazione delle direttive personalizzate in AngularJS ma il concetto non mi è ancora chiaro. Voglio dire, cosa significa se utilizzo uno dei valori dell'ambito 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
  }
});

Cosa stiamo facendo esattamente con l'ambito qui?

Non sono inoltre sicuro che "scope: '>'" esista o meno nella documentazione ufficiale. È stato usato nel mio progetto.

Edit-1

L'uso di "scope: '>'" è stato un problema nel mio progetto ed è stato risolto.

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

Questo è illustrato al meglio con un esempio:

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

e la definizione della 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 scopeviene utilizzata la proprietà, la direttiva si trova nella cosiddetta modalità "ambito isolato", il che significa che non può accedere direttamente all'ambito del controller principale.

In termini molto semplici, il significato dei simboli vincolanti è:

someObject: '=' (associazione dati bidirezionale)

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

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

Questa informazione è presente nella pagina di documentazione della direttiva AngularJS , sebbene in qualche modo diffusa in tutta la pagina.

Il simbolo >non fa parte della sintassi.

Tuttavia, <esiste come parte delle associazioni dei componenti AngularJS e significa associazione a una via.

> non è nella documentazione.

< è per rilegatura a senso unico.

@l'associazione è per il passaggio di stringhe. Queste stringhe supportano {{}}espressioni per valori interpolati.

=l'associazione è per l'associazione modello bidirezionale. Il modello in ambito padre è collegato al modello in ambito isolato della direttiva.

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

Quando stiamo impostando l'ambito: vero nella direttiva, Angular js creerà un nuovo ambito per quella direttiva. Ciò significa che eventuali modifiche apportate all'ambito della direttiva non si rifletteranno nel controllore principale.

< rilegatura a senso unico

= rilegatura a due vie

& associazione di funzioni

@ passa solo stringhe

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

1. I dati possono essere passati come stringa usando il valore @letterale stringa, passa valore stringa, associazione unidirezionale.
2. I dati possono essere passati come oggetto usando la =stringa letterale, pass object, 2 way binding.
3. I dati possono essere passati come una funzione &letterale stringa, chiama funzione esterna, può passare i dati dalla direttiva al controller.

La documentazione di AngularJS sulle direttive è abbastanza ben scritta per ciò che significano i simboli.

Per essere chiari, non puoi semplicemente avere

scope: '@'

in una definizione di direttiva. È necessario disporre di proprietà a cui si applicano tali associazioni, come in:

scope: {
    myProperty: '@'
}

Consiglio vivamente di leggere la documentazione e le esercitazioni sul sito. Ci sono molte più informazioni che devi sapere su ambiti isolati e altri argomenti.

Ecco una citazione diretta dalla pagina collegata sopra, relativa ai valori di scope:

La proprietà scope può essere true, un oggetto o un valore errato:

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

• true: Un nuovo ambito figlio che eredita prototipicamente dal suo genitore 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 hash oggetto) : viene creato un nuovo ambito "isolato" per l'elemento della direttiva. L'ambito "isolato" differisce dall'ambito normale in quanto non eredita prototipicamente dall'ambito padre. Ciò è utile quando si creano componenti riutilizzabili, che non devono leggere o modificare accidentalmente i dati nell'ambito genitore.

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

Ho avuto problemi a legare un valore con uno dei simboli in AngularJS 1.6. Non ho ottenuto alcun valore, solo undefined, anche se l'ho fatto esattamente allo stesso modo di altri binding nello stesso file che ha funzionato.

Il problema era: il mio nome variabile aveva un trattino basso.

Questo fallisce:

bindings: { import_nr: '='}

Questo funziona:

bindings: { importnr: '='}

(Non completamente correlato alla domanda originale, ma è stato uno dei migliori risultati di ricerca quando ho guardato, quindi spero che questo aiuti qualcuno con lo stesso problema.)