web-dev-qa-db-de.com

AngularJS - Zugriff auf Ng-Click in der benutzerdefinierten Direktive

Ich versuche, meine Anweisungen in den Kopf zu bekommen. Ich kann die Template-Funktion leicht zum Auswerfen meines HTML-Codes verwenden. Wenn ich jedoch einen NG-Klick in meiner Vorlage habe, wie kann ich darauf in der Link-Funktion zugreifen?

Meine Anweisung:

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

Wie Sie sehen können, habe ich $scope.scrollRight zu meiner link-Funktion hinzugefügt. Beim Klicken erscheint jedoch nichts in der Konsole.

Wenn ich platziere:

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

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

In meinem Controller (und außerhalb meiner Direktive) funktioniert es wie erwartet.

Jede Hilfe geschätzt.

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

Ihre Linkfunktion ist folgendermaßen definiert:

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

sie schreiben jedoch Funktionen für die Variable $scope: 

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

In diesem Fall wird $ scope nicht tatsächlich in die Link-Funktion eingefügt (und kann nicht eingefügt werden), daher ist Link nur eine einfache Funktion mit Parametern. Sie sollten $scope in scope ändern und es sollte funktionieren: 

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

Sind Sie sicher, dass der Link-Funktionsparameter scope und nicht $scope heißt?

0
Gildor