2 votes

Comment lier ng-click à un gestionnaire d'événement défini dans une directive ?

Tous :

Je définis une directive comme :

.directive("hellobutton", function(){
    return {
        restrict: "AE",
        scope: {},
        controller: function($scope){
            $scope.sayhello = function(){
                 console.log("hello");
            }
        }
    }
})

Je me demande comment je peux utiliser le gestionnaire sayhello sur cette directive, par exemple :

<hellobutton ng-click="sayhello()"></hellobutton>

Fondamentalement, je ne veux pas passer sayhello depuis l'extérieur, mais laisser cette directive s'en occuper à l'intérieur.

Je me demande si c'est possible ou si je dois définir ce gestionnaire dans un modèle ?

0voto

Serginho Points 520

Vous voulez passer une fonction en tant que paramètre :

.directive("hellobutton", function(){
    return {
        restrict: "AE",
        scope: {
          callback: '&'
        },
        controller: function($scope){
            $scope.callback();
        }
    }
})

et

<hellobutton callback="sayhello()"></hellobutton>

0voto

user2718281 Points 3743

Oui, vous pouvez le faire. Il suffit de définir la directive avec une fonction de lien et de la lier à l'événement de clic. Elle peut ensuite être attachée à n'importe quel élément. Voir plunker

JS :

app.directive("hellobutton", function(){
    return {
        restrict: "A",
        link: function(scope, elem, attr) {
          elem.on('click', function() {
            console.log("hello");
          })
        }
    }
})

Markup :

<button type="button" hellobutton="">Click Me, I'm a button</button>
<div hellobutton="">Click me too, I'm a DIV</div>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X