Wie kann ich feststellen, wann ng-options die Aktualisierung des DOM abgeschlossen hat?

Question

Ich versuche, das jQuery Multiselect-Plugin mit einer Direktive in meiner App zu implementieren. Hier das select-Element:

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

Das Modell parties Modell durch $ http geladen wird. Das MultiSelect-Plugin analysiert die option Elemente innerhalb der select und generiert die nette Multi-Auswahl.

Gibt es eine Möglichkeit festzustellen, wenn das Element select mit Optionen gefüllt ist, damit ich dem Multiselect-Plugin mitteilen kann, seine Daten zu aktualisieren?

Hier ist meine Richtlinie:

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

Wie in den Kommentaren diskutiert, verwenden

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

Ich bin nicht sicher, wenn die Uhr löst vs wenn ngOptions das DOM aktualisiert. Wenn Sie feststellen, dass die Uhr zu früh ausgelöst wird, können Sie versuchen, $evalAsync() oder $ timeout() zu verwenden. $ evalAsync wird später ausgeführt, aber bevor das DOM gerendert wird. $ timeout() wird später ausgeführt, nachdem das DOM gerendert wurde.

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

oder nach dem DOM macht:

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