ChartistJS: Conversion de la solution jQuery en AngularJS

Question

J'utilise Chartist JS pour mes graphiques dans mon application Angular JS. Le problème est que je vois this ici. Il y a un JS bin qui met en évidence le problème. L'auteur donne un solution pour cela. La solution est de faire des manipulations DOM dans Jquery, ce qui est facile à faire. Cependant, avec AngularJS, vous manipulez le DOM via des directives. J'ai créé un plunker here qui met en évidence le même problème dans Angular JS mais je suis confus quant à la façon de mettre la solution fournie par l'auteur dans mon code angulaire. Voici la solution

$('[data-tab]').on('toggled', function (event, tab) { 
    tab.find('.ct-chart').each(function(i, e) { 
     e.__chartist__.update(); 
    }); 
}); 

Modifier: Comme l'a demandé le jsFiddle est mis à jour, donc ce que je suis en train de faire est. J'ai trois onglets différents et trois graphiques différents, chaque fois que je clique dessus, je devrais voir le graphique correspondant. Pour rendre le comportement de l'onglet possible, j'ai écrit un code de base en utilisant la portée et le modèle. ce qui facilite le changement d'onglets. Le problème est que le graphique est créé pour le premier onglet ou l'onglet par défaut mais pas pour le deuxième et le troisième onglet. Il y a une solution donnée par l'auteur mais je ne sais pas comment l'implémenter dans AngualrJS

Answer 1

J'ai été capable de résoudre ceci en utilisant la méthode angular.element(). Donc, si vous souhaitez utiliser jquery dans votre code angulaire. Vous devez le faire via la méthode angular.element. Mais assurez-vous d'inclure jquery avant angulaire dans votre index.html

Si jQuery est disponible, angular.element est un alias pour la fonction jQuery . Si jQuery n'est pas disponible, angular.element délègue à le sous-ensemble intégré de jQuery d'Angular, appelé "jQuery lite" ou jqLite.

Je ne le savais pas. De là, il apprenait pour moi. Suivant les conseils de @pieterjandesmedt de this post. J'étais capable de faire ça. Pour les autres personnes qui veulent apprendre comment cela fonctionne. J'ai créé un GitHub repo qui donne une solution à ce problème. Le lien pour le problème est donné dans la question. J'espère que ça aide

Answer 2

la solution jQuery que vous publiez trouve fondamentalement toutes les références de graphique, puis effectue une manipulation DOM et appelle la fonction update().

La clé est comment trouver le tableau à mettre à jour en Angulaire.
Dans ce cas, vous pouvez affecter une variable lorsque vous créez un graphique. Par exemple:

var chart4 = new Chartist.Bar('#chart4', data1); 
var chart5 = new Chartist.Bar('#chart5', data2); 

Maintenant vous avez la référence du graphique. Tout ce que vous avez à faire est d'appeler update() fonction pour rendre le graphique à nouveau.

if (value === "allDrivers") { 
    $scope.tab = "All"; 
    chart4.update(); 
} 

Voici le working plunker

Une chose que je tiens à souligner est la suivante: en ce moment, vous devez cliquer sur l'onglet pour voir le tableau est rendu ou vous redimensionnez la fenêtre du navigateur. J'essaie toujours de trouver un moyen de résoudre ce problème. Mais au moins cette approche vous donne une idée de la façon de convertir la solution jQuery en solution angulaire.