Mélanger Angular avec du regular JS

El_Matella
Javascript

Bonjour à tous,

j'aurais besoin aujourd'hui de mélanger un peu de JS de base avec du Angular mais je suis en plein mindfuck avec les données de JS et de angular.

En gros, je veux envoyer une donnée que je récupère lors d'un onClick dans un controller.

Imaginons un simple bouton: 

<button data-value="7" id="MyButton">Cliquer</button>

Ainsi qu'un événement sur ce bouton:

$('#MyButton').click(function(){
    var value = $(this).data('value');
    console.log(value);
});

Ainsi qu'un controller angular

app.controller('MyController',function(){
    var controller = this;
    controller.values = [];
    this.addValue = function(){
        controller.values.push(value);
    };
});

Sauf que j'aimerais, lors de l'événement click, utiliser la fonction addValue de mon controller, comment pourrais-je faire?

Sachant que le bloc utilisant ce controller est en dessous:

<div ng-controller="MyController as controller">
    <div ng-repeat="value in controller.values">
        {{ value }}
    </div>
</div>

Merci pour vos conseils!

4 réponses

Maenhyr

Pourquoi ne pas tout faire en AngularJS ? Il n'y a pas besoin de jQuery ici.

El_Matella
Auteur

Je ne fais pas tout avec Angular car j'utilise le plugin "dataTables", et que celui-ci fonctionne avec jQuery, et que je dois extraire des données lors d'événements "click" de ce tableau et les insérer dans des variables qui elles construiront un autre élément HTML avec ng-repeat

Maenhyr

Il te faut utiliser $scope.$apply pour forcer un digest et intégrer du code non AngularJS dans AngularJS.

app.controller('MyController',function(){
  var controller = this;
  controller.values = [];
  this.addValue = function(value){
    controller.values.push(value);
  };

  $('#MyButton').click(function(){
    var value = $(this).data('value');

    $scope.$apply(function() {
      controller.addValue(value)
    });
  });
});

Par contre, il existe beaucoup de librairies jQuery transportées en AngularJS (notamment datatables) donc il serait mieux de les utiliser au maximum.

El_Matella
Auteur

Salut, merci pour ta réponse!
C'est super, je devrais réussir à m'en sortir avec le code que tu m'as donné!

En ce qui concerne datatables traduit en angular, je remplis mon tableau avec Ajax, et comme le dit justement la documentation du module transposé pour Angular:

The "Angular way" is REALLY less efficient than fetching the data with the Ajax/promise solutions. The lack of performance is due to the fact >that Angular add the 2 way databinding to the data, where the ajax and promise solutions do not. However, you can use Angular directives (ng-click, ng-controller...) in there!
If your DataTable has a lot of rows, I STRONGLY advice you to use the Ajax solutions.`