2014-09-04 29 views
6

Quindi ho un pulsante chiamato "mostra altro" che aumenterà il numero di elementi in una lista una volta che raggiunge il numero massimo di lista che voglio cambiare in un pulsante chiamato " mostra meno "che riporta la lista al suo valore predefinito.ng-click smette di funzionare quando si utilizza ng-if

Uso un ng-if per determinare quale pulsante visualizzare e ng-clic per determinare l'azione. Quando li si usa insieme, il ng-click smette di funzionare e non succede nulla quando clicco.

ecco l'html che ho scritto in giada, feedLimit è il numero di elementi visualizzati nell'elenco.

button.btn.btn-primary.btn-block.btn-sm.btn-outline(type='button')(ng-if= "feedLimit < notifications.all.length", ng-click="feedLimit = feedLimit + 4") 
    span(translate) Show More 
button.btn.btn-primary.btn-block.btn-sm.btn-outline(type='button')(ng-if= "feedLimit >= notifications.all.length", ng-click="feedLimit = 4") 
    span(translate) Show Less 

Ho provato con ng-show e ng-pelle e funzionano bene, ma è meglio usare ng-se, non c'è animazione ed è più veloce.

Ecco output HTML lo spettacolo più del pulsante

<button type="button" ng-if="feedLimit < notifications.all.length" ng-click="feedLimit = feedLimit + 4" class="btn btn-primary btn-block btn-sm btn-outline ng-scope" style=""><span class="ng-scope">Show More</span></button> 
+0

Ho notato che hai uno spazio dopo il tuo '=' sul tuo 'ng-if'. Forse Jade interpreta male l'attributo ng-if? –

+1

Angular 1.2 non sembra avere problemi con l'uso di ng-if e ng-click sullo stesso elemento. http://jsfiddle.net/bgcgfnqr/1/ –

+0

provato a eliminare lo spazio senza dadi, anche @ JamesM.Lay hai usato una funzione che forse fa la differenza. – grasshopper

risposta

8

Credo che la vostra esecuzione in un problema comune con angularjs e la portata del bambino eredità.

Si sta vincolando con i dati a un valore primitivo e ng-se si sta creando un ambito figlio. Quando la direttiva ng-click modifica il valore di 'feedLimit', stai effettivamente creando una nuova proprietà 'feedLimit' sull'ambito figlio ma la direttiva ng-if è associata al 'feedLimit' dell'ambito genitore.

La soluzione è di evitare il legame con un valore primitivo. Assicurati invece di utilizzare la notazione a punti legandosi a un oggetto.

Invece di

<button ng-if="feedLimit < notifications.all.length" ng-click="feedLimit = feedLimit + 4"> 

provare qualcosa di simile

<button ng-if="someObj.feedLimit < notifications.all.length" ng-click="someObj.feedLimit = someObj.feedLimit + 4"> 

Ecco una spiegazione più dettagliata di che cosa sta succedendo.

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

Ambito ereditarietà è normalmente semplice, e spesso non si nemmeno bisogno di sapere che sta accadendo ... fino a quando si tenta di dati a 2 vie di legame (vale a dire, elementi del modulo, ng -model) a una primitiva (ad esempio, numero, stringa, booleana) definita sull'ambito principale dall'ambito secondario. È non funziona nel modo in cui la maggior parte della gente si aspetta che funzioni. Cosa succede è che l'ambito secondario ottiene la propria proprietà che nasconde/ombreggia la proprietà genitore con lo stesso nome. Questo non è qualcosa di AngularJS è fare - questo è il modo in cui funziona l'ereditarietà prototipale JavaScript. Nuovo Gli sviluppatori di AngularJS spesso non si rendono conto che ng-repeat, ng-switch, ng-view e ng-include tutti creano nuovi ambiti figlio, quindi il problema si presenta spesso quando queste direttive sono coinvolte. (Vedere questo esempio per una rapida illustrazione del problema.)

Questo problema con le primitive può essere facilmente evitato seguendo la "best practice" di avere sempre un '.' nei tuoi modelli-ng

+1

L'ambito figlio sembra causare il problema. Ho aggiornato il violino di James per usare un oggetto invece di una primitiva e funziona - http://jsfiddle.net/bgcgfnqr/8/ – Alphonso

+0

trasformandolo in un oggetto feed.limit ha funzionato, grazie! – grasshopper

+0

Ho trovato che usando ng-show invece ho funzionato in una situazione simile, ma ho avuto l'assolo @jcruz come il modo migliore per avvicinarmi a questo. – ak85

Problemi correlati