Utilizzo di ng-clic o bind all'interno della funzione di collegamento della direttiva angolare

Question

Nella funzione di collegamento, esiste un modo più "angolare" per associare una funzione a un evento di clic?

In questo momento, sto facendo ...

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

È questo il modo angolare di farlo o è un brutto hack? Forse non dovrei essere così preoccupato, ma sono nuovo in questa struttura e vorrei conoscere il modo "corretto" di fare le cose, specialmente quando il quadro avanza.

Answer 1

E 'possibile utilizzare un controller in direttiva:

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++ 
     } 
     } 
    } 
    }); 

Demo on plunkr

più su direttive Angular guide. E molto utile per me è stato video dal blog ufficiale Angular post About those directives.

Answer 2

Penso che vada bene perché ho visto molte persone fare così.

Se si sta definendo il gestore di eventi all'interno della direttiva, non è necessario definirlo sull'oscilloscopio. Seguire andrebbe bene.

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

Answer 3

Non dovrebbe essere semplicemente:

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

perché vuoi scrivere una nuova direttiva solo per mappare il tuo evento click per la richiamata per la vostra portata? ng-click lo fa già per te.

Answer 4

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

questo agirà come eventi onclick sul attributo ClickMe

Answer 5

In questo caso, non c'è bisogno di direttiva. Questo fa il lavoro:

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

Fonte

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

Answer 6

Si dovrebbe utilizzare il controller nella direttiva e ng clic nel modello HTML, come risposte precedenti suggerite. Tuttavia, se è necessario manipolare DOM sull'evento (clic), ad esempio facendo clic sul pulsante, si desidera modificare il colore del pulsante o così, quindi utilizzare la funzione Link e utilizzare l'elemento per manipolare il dom.

Se tutto ciò che si vuole fare è mostrare un valore su un elemento HTML o qualsiasi attività di manipolazione non dom, allora potrebbe non essere necessaria una direttiva e può usare direttamente il controller.