Perché ng non è vincolante per l'elemento <ui-gmap-windows> in Angular Google Maps?

Question

Ho una domanda sull'elemento del plug-in Angular Google Maps. Il codice sorgente di esempio nella documentazione per l'elemento Windows utilizza l'attributo ng-non-bindable per lo <div> all'interno dell'elemento <ui-gmap-windows>. Apparentemente, questo è necessario affinché i binding angolari possano essere visualizzati correttamente nella pagina. Questo non è esplicitamente indicato nella documentazione, quindi mi chiedo esattamente perché questo attributo è necessario, soprattutto perché lo official Angular documentation on ng-non-bindable chiarisce che i valori letterali angolari all'interno degli elementi HTML annotati non verranno analizzati da Angular.

Per illustrare, questo è un frammento di codice nel mio HTML parziale (supporre che il modello attributo portata per questo elemento finestre ha un nome e un campo di descrizione):

<ui-gmap-markers models="markers" coords="'self'"> 
    <ui-gmap-windows> 
    <div>{{name}}: {{description}}</div> 
    </ui-gmap-windows> 
</ui-gmap-markers> 

Senza ng-non-bindable come attributo allo <div> (o senza nessun div), i valori del modello non saranno associati a questi valori letterali angolari. Solo i due punti saranno visualizzati nella finestra, come in ":". Ma, una volta che ho messo in l'attributo:

<ui-gmap-markers models="markers" coords="'self'"> 
    <ui-gmap-windows> 
    <div ng-non-bindable>{{name}}: {{description}}</div> 
    </ui-gmap-windows> 
</ui-gmap-markers> 

quindi il testo della finestra renderà correttamente. Dirà qualcosa come "Posizione 1: è qui che si trova la Posizione 1".

Quindi, ancora una volta, mi sto chiedendo perché ng-non-bindable sia esattamente richiesto qui. Mi aiuterà molto a capire meglio questa libreria angolare, e forse angolare nel suo complesso, meglio.

Answer 1

Fondamentalmente questo si riduce a ui-gmap che esegue la compilazione manuale del modello.

In serie angolare se avete qualcosa di simile:

<directive> 
    <some-html>{{someBinding}}</some-html> 
<directive> 

Che di solito significa che "direttiva" è L'inclusione del contenuto, e quindi "someBinding" è legato al campo di applicazione in cui "direttiva" un'istanza, non la "direttiva" innerScope.

Tuttavia, nel caso di ui-gmap:

<ui-gmap-windows> 
    <some-html>{{someBinding}}</some-html> 
</ui-gmap-windows> 

Lo scopo dovrebbe essere quello di ogni finestra che si crea, non è l'ambito di ui-gmap finestre di un'istanza. Quindi, se non si ha ng-non-bindable, l'ambito sarà l'istanza di ui-gmap-windows e alcuniBinding non esisteranno.

In sostanza ui-gmap utilizza l'elemento transcluso come modello per l'applicazione a ciascun oggetto finestra istanziato, ma se l'angolare entra e lega quell'elemento all'ambito sbagliato, ui-gmap non può riconnettersi al corretto scopo.

Speranza che ti chiarisca un po '.

Su una nota a parte, non dovresti usare ui-gmap-windows a meno che non sia necessario visualizzare contemporaneamente un numero di finestre. Usa una singola finestra di ui-gmap e legala al marcatore attivo.