5

Ho una direttiva personalizzata myDirective che esegue un'attività su un elemento.La direttiva AngularJS all'interno di ng-if non verrà eseguita

ho questa direttiva in un blocco ng-if

<div ng-if="condition"> 
    <div my-directive></div> 
</div> 

Qualcosa di simile violino: http://jsfiddle.net/hGnvv/ solo la condizione ng-if si trasforma in vero dopo le mie $http richieste vengono caricati.

La direttiva è probabilmente compilata durante il runtime, ma mai collegata, quindi il codice non viene mai eseguito. Se sostituisco ng-if per ng-show, la direttiva funziona correttamente.

Qualche soluzione?

Modifica: Non riesco a utilizzare ng-show perché ho 130 direttive nel modulo. 20 direttive funzionano ugualmente, e l'altra corre secondo il mio tipo di oggetto.

  • ng-if="type == 1" quindi caricare questi elementi
  • ng-if="type == 2" quindi caricare altri elementi ecc

Se cambio la ng-if al ng-show, il modulo assume 8s per caricare invece di 1s.

+4

Hai già una soluzione.Sostituire ng-if con ng-show – nikhil

+0

Non riesco a farlo, ho come 130 direttive su un singolo modulo. Se sostituisco la ng-if con ng-show, tutto questo codice che deve essere eseguito gira il modulo molto più lentamente (8s invece di ~ 1s). –

+2

Utilizzare ng-show se possibile. Ng-if rimuove l'elemento dal DOM, quindi non c'è modo per angolare compilarlo. –

risposta

2

Il problema non era che la direttiva non fosse in esecuzione, ma che le funzioni $watch che avevo all'interno non fossero affatto funzionanti. Non sono riuscito a capire la ragione esatta del problema, perché la stessa direttiva funziona bene al di fuori dello ng-if.

In ogni caso ha cambiato il mio $watch in ->$watchCollection e ora funziona bene, poiché vede tutti gli aggiornamenti agli oggetti che sto guardando.

2

La condizione ng-if è inizialmente falsa, quindi l'elemento non esiste nel DOM e la direttiva non è stata collegata.

Quando il ng, se condizione diventa successivamente true, la richiamata collegamento dovrebbe sparare in modo corretto, come si è visto in questi esempi:

Impostazione ng-if true quando fa clic sul pulsante: http://jsfiddle.net/q05gret0/

Impostazione ng-if al vero dopo $http richiesta caricata: http://jsfiddle.net/fhu8ky62/1/

Se non si ottiene questo comportamento, il problema potrebbe riguardare un ambito ereditato; controllare che ng-if stia monitorando la stessa variabile di ambito che la richiesta sta aggiornando. This article presenta alcuni punti sullo shadowing della variabile dell'ambito padre/figlio e altre limitazioni.

+0

Voglio eseguire il codice quando la condizione ng-if diventa vera. Il problema è che quando diventa vero, il collegamento della direttiva non viene eseguito. –

+0

Ah capisco ora, cambierò la mia risposta – seanhodges

+0

Grazie per l'aiuto, questo non era il problema. Sono riuscito a trovarlo, pubblicandolo in un'altra risposta qui sotto. –

0

per esempio se il modello è come $scope.item = true e lo si utilizza come ng-if="item" si dovrebbe cambiare il vostro modello di $scope.myvalue = {} e utilizzare in questo modo: ng-if="myvalue.item", a tutti voglio dire che si dovrebbe usare proprietà dell'oggetto per ng-if non un semplice valore