web-dev-qa-db-fra.com

AngularJS - accès à ng-click dans une directive personnalisée

J'essaie de comprendre les directives. Je peux facilement utiliser la fonction template pour jeter mon code HTML. Cependant, si j'ai un clic droit dans mon template, comment puis-je y accéder via la fonction link?

Ma directive:

app.directive('directiveScroll', function () {
return {
      restrict: 'AE',
      replace: 'true',
      template:   '<div class="scroll-btns">' +
            '<div class="arrow-left" ng-click="scrollLeft(sectionID)"></div>' +
            '<div class="arrow-right" ng-click="scrollRight(sectionID)"></div>' +
        '</div>',
      link: function(scope, elem, attrs) {
        $scope.scrollRight  = function () {
          console.log("scrollRight  clicked");
        };
        $scope.scrollLeft  = function () {
          console.log("scrollLeft  clicked");
        };
      }
  };
});

Comme vous pouvez le constater, j’ai ajouté $scope.scrollRight à ma fonction link; cependant, au clic, rien n’apparaît dans la console.

Si je place:

$scope.scrollRight  = function () {
     console.log("scrollRight  clicked");
};

$scope.scrollLeft  = function () {
     console.log("scrollLeft  clicked");
};

Dans mon contrôleur (et hors de ma directive), cela fonctionne comme prévu.

Toute aide appréciée.

angularjsangularjs-directiveangularjs-scopeangularjs-ng-click
14
Oam Psy

Votre fonction de lien est définie comme ceci:

link: function(scope, elem, attrs) {..}

cependant, vous écrivez des fonctions sur la variable $scope: 

    $scope.scrollRight  = function () {
      console.log("scrollRight  clicked");
    };
    $scope.scrollLeft  = function () {
      console.log("scrollLeft  clicked");
    };

Dans ce cas, $ scope n'est pas réellement injecté dans la fonction link (et ne peut pas être injecté), le lien est donc une simple fonction avec des paramètres. Vous devriez changer $scope en scope et cela devrait fonctionner: 

    scope.scrollRight  = function () {
      console.log("scrollRight  clicked");
    };
    scope.scrollLeft  = function () {
      console.log("scrollLeft  clicked");
    };
17
domakas

Etes-vous sûr que le paramètre de fonction de lien s'appelle scope, pas $scope?

0
Gildor