web-dev-qa-db-fra.com

Utilisation de ng-click vs bind au sein de la fonction de liaison de la directive angulaire

Dans la fonction de lien, existe-t-il un moyen plus "angulaire" de lier une fonction à un événement de clic? 

En ce moment, je fais ...

myApp.directive('clickme', function() {   
  return function(scope, element, attrs) {
    scope.clickingCallback = function() {alert('clicked!')};
    element.bind('click', scope.clickingCallback);   
} });

Est-ce la façon angulaire de le faire ou est-ce un hack laid? Je ne devrais peut-être pas être aussi inquiet, mais je suis novice dans ce cadre et aimerais connaître la "bonne" façon de faire les choses, en particulier à mesure que le cadre avance. 

angularjsangularjs-directive
67
ehfeng

Vous pouvez utiliser un contrôleur dans la directive:

angular.module('app', [])
  .directive('appClick', function(){
     return {
       restrict: 'A',
       scope: true,
       template: '<button ng-click="click()">Click me</button> Clicked {{clicked}} times',
       controller: function($scope, $element){
         $scope.clicked = 0;
         $scope.click = function(){
           $scope.clicked++
         }
       }
     }
   });

Démo sur plunkr

En savoir plus sur les directives dans Guide angulaire . Et des vidéos tirées du blog officiel Angular À propos de ces directives .

61
Maxim Grach

Je pense que ça va parce que j'ai vu beaucoup de gens faire de cette façon.

Si vous ne faites que définir le gestionnaire d'événements dans la directive, vous n'avez pas à le définir dans la portée, bien que ..

myApp.directive('clickme', function() {
  return function(scope, element, attrs) {
    var clickingCallback = function() {
      alert('clicked!')
    };
    element.bind('click', clickingCallback);
  }
});
36
Tosh

Ne devrait-il pas simplement être:

<button ng-click="clickingCallback()">Click me<button>

Pourquoi voulez-vous écrire une nouvelle directive juste pour mapper votre événement click à un rappel sur votre portée? ng-click le fait déjà pour vous.

10
Nikhil_Katre

Vous devez utiliser le contrôleur dans la directive et ng-click dans le modèle html, comme suggéré dans les réponses précédentes. Toutefois, si vous devez manipuler le DOM lors de l'événement (clic), par exemple lorsque vous cliquez sur le bouton, vous souhaitez modifier la couleur du bouton, utilisez la fonction Link et utilisez l'élément pour manipuler le dom.

Si tout ce que vous voulez faire, c'est afficher une valeur sur un élément HTML ou une tâche de manipulation non dom, vous n'aurez peut-être pas besoin d'une directive et pourrez utiliser directement le contrôleur.

0
Hasteq