web-dev-qa-db-ger.com

Verwenden von ng-click vs bind innerhalb der Link-Funktion der Winkelrichtlinie

Gibt es in der Link-Funktion eine mehr "winkelige" Methode, um eine Funktion an ein Klickereignis zu binden? 

Ich mache gerade...

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

Ist das die Angular-Methode, oder ist es ein hässlicher Hack? Vielleicht sollte ich nicht so besorgt sein, aber ich bin neu in diesem Rahmen und würde gerne die "richtige" Vorgehensweise wissen, insbesondere wenn der Rahmen voranschreitet. 

67
ehfeng

Sie können einen Controller in der Direktive verwenden:

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 auf Plunkr

Mehr über Richtlinien in Winkelführung . Sehr hilfreich für mich waren Videos aus dem offiziellen Angular-Blogbeitrag Über diese Richtlinien .

61
Maxim Grach

Ich denke, es ist gut, weil ich viele Leute gesehen habe, die diesen Weg gehen.

Wenn Sie nur den Ereignishandler in der Direktive definieren, müssen Sie ihn nicht im Geltungsbereich definieren, obwohl . Folgendes wäre in Ordnung.

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

Sollte es nicht einfach so sein:

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

Warum möchten Sie eine neue Direktive schreiben, um Ihr Klickereignis einem Rückruf in Ihrem Gültigkeitsbereich zuzuordnen? ng-click erledigt das bereits für Sie.

10
Nikhil_Katre

Sie sollten den Controller in der Direktive und ng-click in der HTML-Vorlage verwenden, wie in den vorherigen Antworten vorgeschlagen. Wenn Sie jedoch DOM-Manipulationen für das Ereignis (Klicken) vornehmen müssen, z. B. durch Klicken auf die Schaltfläche, möchten Sie die Farbe der Schaltfläche ändern oder so. Verwenden Sie dann die Link-Funktion und verwenden Sie das Element, um den Dom zu bearbeiten.

Wenn Sie lediglich einen Wert für ein HTML-Element oder eine solche nicht-dom-manipulative Task anzeigen möchten, benötigen Sie möglicherweise keine Direktive und können den Controller direkt verwenden.

0
Hasteq