2013-07-12 10 views
64

Nel video AngularJS MTV Meetup: Best Practices (2012/12/11), Miško spiega "..se si utilizza ng-modello ci deve essere un punto da qualche parte. Se non si dispone di un punto, si sta facendo male .."Perché i documenti di AngularJS non usano un punto nella direttiva del modello?

Tuttavia, il primo esempio (The Basics) nello Angular.JS website sembra contraddirlo. Cosa dà? Angular.JS è cambiato dal meetup di MTV che ora è più indulgente con ng-model?

+0

Personalmente ritengo che questo sia più un problema di filosofia sulla modellazione di un sistema. Alcune persone usano '$ scope' come modello di vista, mentre altre no. È una questione di preferenza. – yuxhuang

+0

Vedere http: // stackoverflow.it/questions/15623698/direction-isolate-scope-with-ng-repeat-scope/15645354 # 15645354 – yanhan

risposta

101

quel puntino è molto importante quando si tratta con la complessità di portata eredità.

Il egghead.io video "The Dot" ha davvero una buona visione d'insieme, come fa questa domanda molto popolare di stack overflow: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

cercherò di riassumere qui:

Angular.js usa portata ereditando per consentire un ambito bambino (come un controller figlio) per vedere le proprietà dell'ambito principale. Quindi, diciamo che si ha una configurazione simile:

<div ng-controller="ParentCtrl"> 
    <input type="text" ng-model="foo"/> 
    <div ng-controller="ChildCtrl"> 
     <input type="text" ng-model="foo"/> 
    </div> 
</div> 

(Play along on a JSFiddle)

In un primo momento, se hai iniziato l'applicazione, e digitato nell'ingresso genitore, il bambino sarebbe aggiornare per riflettere esso.

Tuttavia, se si modifica l'ambito figlio, la connessione al genitore è ora interrotta e i due non si sincronizzano più. D'altra parte, se si utilizza ng-model="baz.bar", il collegamento rimarrà.

La ragione per cui questo accade è perché l'ambito figlio utilizza l'ereditarietà prototipica per cercare il valore, quindi finché non viene mai impostato sul figlio, verrà rinviato all'ambito genitore. Ma, una volta impostato, non cerca più il genitore.

Quando si utilizza un oggetto (baz), non viene impostato nulla sull'ambito secondario e l'ereditarietà rimane.

Per maggiori dettagli in profondità, controlla la StackOverflow answer

+3

Questo video egghead vale il suo peso in oro. Migliore descrizione di questo problema, mai. –

+0

Che riassunto sintetico - fantastico. – drjimmie1976

+1

Sono l'unico a pensare che aggiungere variabili contenitore arbitrarie sia incredibilmente brutto? Capisco perché è una "buona pratica", ma è così brutto vedere variabili casuali contenenti le cose che realmente contano. In realtà tendo ad evitare questa "migliore pratica" per questo motivo. Non incappò spesso in problemi, perché sono consapevole delle conseguenze. Non sono stato morso da questo in oltre un anno di intenso sviluppo angolare. – Spencer

17

Punto richiesto quando si eredita prototipicamente un ambito da un altro, ad esempio in caso di ng-repeat viene creato un nuovo ambito per ogni elemento pubblicitario che prototipicamente eredita dall'ambito principale. Nell'esempio di base non esiste un'ereditarietà del prototipo poiché esiste un solo ambito, ma se si dispone di un numero di ambiti figlio, si inizierà ad affrontare il problema. Il link sottostante renderà tutto chiaro.

https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

0

Quindi, per risolvere questo problema, assicurarsi che nel JS si dichiara il genitore prima:

esempio

$scope.parent 

seguito da:

$scope.parent.child = "Imma child"; 

facendo proprio il bambino senza il genitore si romperà angolare.

Problemi correlati