Utilisation de ng-click vs bind dans la fonction de lien de la directive Angular

Question

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 que c'est la façon de faire d'Angular ou est-ce que c'est un affreux bidouillage ? Je ne devrais peut-être pas m'inquiéter autant, mais je suis nouveau dans ce framework et j'aimerais connaître la "bonne" façon de faire les choses, d'autant plus que le framework évolue.

Answer 1

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émonstration sur plunkr

Pour en savoir plus sur les directives dans Guide angulaire . Et les vidéos du blog officiel d'Angular m'ont été très utiles. A propos de ces directives .

Answer 2

Je pense que c'est bien parce que j'ai vu beaucoup de gens faire comme ça.

Si vous définissez simplement le gestionnaire d'événement dans la directive, vous n'avez pas besoin de le définir dans la portée. Ce qui suit est très bien.

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

Answer 3

Cela ne devrait-il pas être simplement :

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

Pourquoi voulez-vous écrire une nouvelle directive juste pour faire correspondre votre événement de clic à un callback sur votre scope ? ng-click le fait déjà pour vous.

Answer 4

Dans ce cas, pas besoin de directive. Cela fait l'affaire :

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

Source : https://docs.angularjs.org/api/ng/directive/ngClick

Answer 5

myApp.directive("clickme",function(){
    return function(scope,element,attrs){
        element.bind("mousedown",function(){
             <<call the Controller function>>
              scope.loadEditfrm(attrs.edtbtn); 
        });
    };
});

cela agira comme des événements onclick sur l'attribut clickme