Come chiamare una funzione JQuery da AngularJS quando viene modificata una vista

Question

Sono nuovo in AngularJS e ho a che fare con un problema durante l'implementazione di jQuery custom content scroller nella mia applicazione.

Ho bisogno dello scroller per aggiornare, quando aggiorno il contenuto con Angular, per questo lo scroller ha un metodo update. Il mio problema è che non so dove chiamarlo. Il markup per il contenuto è il seguente:

<div class="scroll-list nice-scrollbars"> 
    <ul class="gallery clearfix"> 
     <li class="extra-alt" ng-repeat="item in relatedItems.data"> 
      ... 
     </li> 
    </ul> 
</div> 

Stavo cercando di chiamare il metodo di aggiornamento nel ramo successo di $http.post di Angolare:

$scope.relatedItems = $http.post($scope.url, { 
    'filterType': 'related', 'film': id 
}).success(function() { 
    $(".nice-scrollbars").mCustomScrollbar('update'); 
}); 

questo non ha funzionato, penso che sia perché quando il viene chiamato il metodo di successo, il contenuto della vista non è ancora stato aggiornato (potrei vederlo usando una funzione alert, i dati sono comparsi dopo aver chiuso la finestra di dialogo)

L'unico modo in cui sono riuscito a far funzionare le barre di scorrimento era usare lo scroller ADVAN immobili CED per osservare i cambiamenti nel contenuto (queste sono le opzioni passate alla barra di scorrimento):

var scrollbarOpts = { 
    scrollButtons:{ 
     enable:true 
    }, 
    advanced:{ 
     updateOnContentResize: true 
     //@TODO: get rid of this, correctly find where to call update method 
    } 
} 

Questa è cattiva pratica, come questa opzione riduce le prestazioni di tutta la sceneggiatura. Mi piacerebbe sapere dove è il posto giusto per chiamare i metodi jQuery necessari per aggiornare DOM come necessario, o in che modo tale associazione consente di visualizzare correttamente le modifiche in AngularJS?

Answer 1

La manipolazione del DOM deve essere eseguita in una direttiva (non un controller). La direttiva dovrebbe $ watch() il modello per le modifiche e la callback dell'orologio deve eseguire la manipolazione DOM jQuery. A volte $ evalAsync è necessario per eseguire il codice jQuery dopo che Angular ha aggiornato/modificato il DOM (ma prima del rendering del browser. Usa $timeout se vuoi eseguire qualche azione dopo il rendering del browser). Vedi this answer, dove ho fornito un violino che mostra come usare una direttiva per $ watch() una proprietà del modello, e ho usato $ evalAsync in una funzione mock fetch().

Per il vostro caso particolare, suggerisco di provare prima la seguente, in una direttiva:

scope.$watch("relatedItems.data", function() { 
    $(".nice-scrollbars").mCustomScrollbar('update'); 
}); 

e se questo non funziona, provate questo:

scope.$watch("relatedItems.data", function() { 
    scope.$evalAsync( // you might need to wrap the next line in a function, not sure 
     $(".nice-scrollbars").mCustomScrollbar('update') 
    ); 
});