Come posso determinare quando ng-options ha terminato l'aggiornamento del DOM?

Question

Sto cercando di implementare il plug-in multiselect jQuery utilizzando una direttiva all'interno della mia app. Qui' l'elemento di selezione:

<select multiple 
     ng-model="data.partyIds" 
     ng-options="party.id as party.name for party in parties" 
     xs-multiselect="parties"> 
</select> 

Il modello parties modello viene caricato tramite $ http. Il plug-in multiselect analizza gli elementi option all'interno di select e genera la bella selezione multipla.

C'è un modo per rilevare quando l'elemento select è popolato con opzioni, quindi posso dire al plug-in multiselect di aggiornare i suoi dati?

Ecco la mia direttiva:

machineXs.directive("xsMultiselect", function() { 
    return { 
     restrict: "A", 
     require: '?ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      element.multiselect().multiselectfilter(); 
      scope.$watch(scope[attrs["xsMultiselect"]], function() { 
       // I tried watching but it doesn't help 
       element.multiselect('refresh'); 
       element.multiselectfilter("updateCache"); 
      }); 
     } 
    } 
}); 

Answer 1

Come discusso nei commenti, uso

scope.$watch(attrs.xsMultiselect, ...) 

Non sono sicuro di quando l'orologio si innesca quando vs ngOptions aggiorna il DOM. Se scopri che l'orologio si sta attivando troppo presto, puoi provare a utilizzare $evalAsync() o $ timeout(). $ evalAsync verrà eseguito in seguito, ma prima del rendering del DOM. $ timeout() verrà eseguito in seguito, dopo il rendering del DOM.

scope.$watch(attrs.xsMultiselect, function() { 
    scope.$evalAsync(function() { 
     element.multiselect('refresh'); 
     element.multiselectfilter("updateCache"); 
    }); 
}); 

o, dopo il DOM rende:

scope.$watch(attrs.xsMultiselect, function() { 
    $timeout(function() { 
     element.multiselect('refresh'); 
     element.multiselectfilter("updateCache"); 
    }); 
});