Comment appeler une fonction JQuery depuis AngularJS lorsqu'une vue est modifiée

Je suis nouveau sur AngularJS, et je fais face à un problème lors de la mise en œuvre de jQuery contenu personnalisé scroller dans mon application.

J'ai besoin de la molette de mise à jour, lorsque je mets à jour le contenu Angulaire, ce pour cela que la barre de défilement a un update méthode. Mon problème est que je ne sais pas où appeler. Le balisage pour le contenu est le suivant:

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

J'ai essayé d'appeler la méthode de mise à jour dans la réussite de la branche de l'Angulaire de l' $http.post:

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

Cela n'a pas fonctionné, je pense que c'est parce que lorsque le succès de la méthode est appelée, le contenu de l'affichage n'est pas mis à jour encore (j'ai pu le voir à l'aide d'un alert fonction, les données sont apparus après la fermeture de la boîte de dialogue)

La seule façon que j'ai été en mesure de faire les barres de défilement de travail a l'aide de la molette de la propriété avancée pour observer les changements dans le contenu (ce sont les options passées à la barre de défilement):

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

C'est une mauvaise pratique, cette option réduit les performances de l'ensemble du script.
Je voudrais savoir, où est le bon endroit pour appeler jQuery méthodes nécessaires à la mise à jour du DOM en tant que de besoin, ou comment une telle liaison, pour voir les modifications faites correctement AngularJS?

source d'informationauteur Teo.sk

  1. 14

    De manipulation du DOM qui devrait être fait dans une directive (pas de contrôleur). La directive $watch() de votre modèle pour des changements, et la montre de rappel doit effectuer le jQuery de manipulation du DOM. Parfois, $evalAsync est nécessaire pour exécuter le code jQuery après Angulaire a mis à jour/modifiés les DOM (mais avant le rend navigateur. Utilisation $timeout si vous voulez faire effectuer une action après la rend navigateur). Voir cette réponseoù j'ai fourni un violon montrant comment utiliser une directive $watch() à une propriété du modèle, et j'ai utilisé $evalAsync dans un simulacre de fetch() fonction.

    Pour votre cas particulier, je vous suggère d'essayer d'abord les éléments suivants, dans une directive:

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

    et si cela ne fonctionne pas, essayez ceci:

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