AngularJS 1.4 direttive: scope, a due vie vincolante e bindToController

Question

aggiornamento: deve essere stato qualcosa di stupido in un'altra parte del codice. Funziona ora, quindi la sintassi bindToController va bene.

Stiamo utilizzando AngularJS 1.4, che ha introdotto un new way to use bindToController in direttive.

Dopo un bel po 'di lettura (e forse non capire tutto), abbiamo definito la nostra direttiva come questa:

.directive('mdAddress', function mdAddress() { 
    var directive = { 
     restrict: 'EA', 
     scope: {}, 
     bindToController: { 
     address: '=' 
     }, 
     templateUrl: 'modules/address/address.html', 
     controller: AddressController, 
     controllerAs: 'dir' 
    }; 

Chiamarlo da un'altra vista in questo modo:

<md-address address="vm.address"></md-address> 

Avendo già definito nel controller della vista:

vm.address = { 
    street: null, 
    countryCode: null, 
    cityCode: null, 
    postalCode: null 
    }; 

Riferimento alle variabili in th e direttiva modello come questa:

<md-input-container> 
    <label>{{'ADDRESSNUMBER' | translate}}</label> 
    <input type="number" ng-model="dir.address.streetNumber"> 
    </md-input-container> 

Abbiamo trascorso 4 ore cercando di capire perché la nostra direttiva non funzionava. Bene, funzionava, ma il collegamento bidirezionale tra il controller e la direttiva non lo era, vm.address.street era irrimediabilmente impostato su null.

Dopo un po ', abbiamo appena provato il vecchio modo:

.directive('mdAddress', function mdAddress() { 
    var directive = { 
     restrict: 'EA', 
     scope: { 
     address: '=' 
     }, 
     bindToController: true, 
     templateUrl: 'modules/address/address.html', 
     controller: AddressController, 
     controllerAs: 'dir' 
    }; 

E magicamente funzionato. Qualche idea PERCHÉ?

Answer 1

Aggiornamento:

Grazie al reference to this blog post, ho bisogno di aggiornare la mia risposta. Dal AngularJS 1.4 sembra davvero, che è possibile utilizzare

scope: {}, 
bindToController: { 
    variable: '=' 
} 

, che farà il (esatto) stessa cosa che la vecchia sintassi:

scope: { 
    variable: '=' 
}, 
bindToController: true 

Le linee utili dal codice AngularJS fonte per spiegare questo comportamento:

if (isObject(directive.scope)) { 
    if (directive.bindToController === true) { 
    bindings.bindToController = parseIsolateBindings(directive.scope, 
                directiveName, true); 
    bindings.isolateScope = {}; 
    } else { 
    bindings.isolateScope = parseIsolateBindings(directive.scope, 
               directiveName, false); 
    } 
} 
if (isObject(directive.bindToController)) { 
    bindings.bindToController = 
     parseIsolateBindings(directive.bindToController, directiveName, true); 
} 

Fonte: AngularJS 1.4.0

Risposta originale:

Spero di poterti spiegare perché questo comportamento che hai riscontrato sia corretto e in cui hai sbagliato a comprendere il concetto di oscilloscopio.

Mi spiego meglio, quello che hai fatto nel tuo primo frammento di codice:

.directive('mdAddress', function mdAddress() { 
    var directive = { 
     restrict: 'EA', 
     scope: {}, 
     bindToController: { 
     address: '=' 
     }, 
     templateUrl: 'modules/address/address.html', 
     controller: AddressController, 
     controllerAs: 'dir' 
    }; 

Con scope: {}, è stato creato un ambito isolato (senza alcuna eredità) per la direttiva mdAddress. Ciò significa che non vengono trasmessi dati tra il controller principale e la direttiva.

Avendo questo in mente, per quanto riguarda il secondo frammento di codice:

<md-address address="vm.address"></md-address> 

vm.address dal controller genitore/Vista saranno assegnati come espressione per l'attributo di indirizzo della direttiva, ma come si definito un ambito isolato prima , i dati non vengono passati a AddressController e pertanto non sono disponibili nel valore bindToController.

Pensiamo alla definizione dell'oggetto scope come a "quali dati verranno passati" e allo bindToController come "quali dati saranno disponibili nell'oggetto controllerA vista di mia vista".

Così, ora diamo uno sguardo all'ultimo (e il codice di lavoro frammento di):

.directive('mdAddress', function mdAddress() { 
    var directive = { 
     restrict: 'EA', 
     scope: { 
     address: '=' 
     }, 
     bindToController: true, 
     templateUrl: 'modules/address/address.html', 
     controller: AddressController, 
     controllerAs: 'dir' 
    }; 

C'è stato creato un ambito isolato, troppo, ma questa volta si è aggiunto l'attributo address da passato come un espressione. Così ora lo address passato dalla vista nel secondo frammento sarà disponibile nell'ambito del controllore. Impostando ora bindToController: true, si associeranno tutte le proprietà dell'ambito corrente al controller (o più probabilmente all'oggetto controllerAs). E ora funziona come ci si aspetterebbe, perché i dati verranno passati all'ambito e i dati verranno passati all'ambito del modello del controllore.

Questa breve panoramica consente di comprendere meglio il concetto degli oggetti di definizione scope e bindToController?