2015-12-16 14 views
7

L'ho riscontrato durante la migrazione dalla versione 1.2.14 alla versione 1.4.8. Funziona bene in 1.2.14, ma ottengo un ciclo infinito $ digest() in 1.4.8. Ecco un Fiddle che dimostra il problema. Il violino è molto più facile da guardare che questo post, ma così mi sta facendo includere il codice

Ho un elemento select che assomiglia a questo:

<select ng-model="selectedId" ng-options="opt.id as opt.label for opt in getOptions()"> 

mie opzioni sono oggetti, come questo:

$scope.options = [ { id: 1, label: 'one' }, { id: 2, label: 'two' } ]; 

La serie di opzioni che voglio dare alla direttiva ngOptions dipende dalle condizioni; a volte voglio solo dargli il $scope.options, ma a volte voglio includere un'altra opzione.

$scope.getOptions = function() { 
    if ($scope.showThirdOption) 
     return [{ id: 3, label: 'three' }].concat($scope.options); 
    else 
     return $scope.options; 
}; 

Ora, se ho impostato il mio livello di codice del modello a 3:

... 
$scope.selectedId = 3; 
... 

... angolare sarà non essere turbato, anche se questa opzione non esiste. Aggiunge solo un nodo <option> all'elemento <select>: <option value="?" selected="selected"></option> e il valore selezionato nel menu a discesa appare vuoto.

Ma se poi impostassi il mio stato i miei GetOptions() restituisce tale opzione aggiuntiva:

... 
$scope.selectedId = 3; 
$scope.showThirdOption = true; 
... 

... ottengo un infinito $ digest() loop.

errors loop bad

C'è un bel modo per evitare un problema come questo? Pensi che sia un bug in Angular (è tecnicamente una regressione), o è solo questo ... non è un modo che dovrei usare ngOptions?

~~~ Again, I have a nice Fiddle for you to play around with!! ~~~

+0

Ecco un esempio che mostra che questo problema non si verifica se le opzioni sono valori anziché oggetti: [** http: //jsfiddle.net/x15jccmj/3**] (http://jsfiddle.net/x15jccmj/3/). –

risposta

2

L'errore si verifica perché si chiama GetOptions function() in ng-options. Crea nuova variabile e assegnare il valore restituito da questa funzione, quindi utilizzarlo in ng-options:

$scope.newOptions = $scope.getOptions(); 

ng-options="opt.id as opt.label for opt in newOptions" 

Inoltre, non dimenticare di aggiornare newOptions sul pulsante di scatto.

Quindi non avrai digerire infinito. Vedere il folio aggiornato: http://jsfiddle.net/bbcjeuhb/

+0

Grazie, ha funzionato alla grande !! : D –