web-dev-qa-db-fra.com

Attribut ng-click sur la directive angularjs

Je pense qu'il devrait être facile d'utiliser les attributs bien connus angular sur une directive prête à l'emploi).

Par exemple, si le nom de ma directive est myDirective, je voudrais l'utiliser de cette façon:

<div ng-controller="myController">
   <my-directive ng-click="doSomething()"><my-directive>
</div>

au lieu de devoir définir un attribut de clic personnalisé (onClick) comme dans l'exemple ci-dessous

<div ng-controller="myController">
   <my-directive on-click="doSomething()"><my-directive>
</div>

Il semble que ng-click peut fonctionner, mais vous devez également spécifier ng-controller sur la balise directive, ce que je ne veux pas. Je veux définir le contrôleur sur une div environnante

Est-il possible d'utiliser ng-click sur une directive avec un contrôleur défini sur un élément html parent?

angularjsangularjs-directive
20
Glenn Dejaeger

Voici le code mis à jour. C'est peut-être ce que vous cherchiez.

Html:

<div data-ng-app="myApp">
    <div data-ng-controller="MyController">
        <my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
        <my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
    </div>
</div>

Angulaire:

var app = angular.module('myApp', []);

app.directive('myDirective', function(){
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            eventHandler: '&ngClick'
        },
        template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
    };
});

app.controller('MyController', ['$scope', function($scope) {
    $scope.myFirstFunction = function(msg) {
         alert(msg + '!!! first function call!');   
    };
    $scope.mySecondFunction = function(msg) {
         alert(msg + '!!! second function call!');   
    };
}]);

Modifier

La solution de vérification que j'ai faite dans jsFiddler est-elle celle que vous cherchiez?

http://jsfiddle.net/migontech/3QRDt/1/

33
migontech