AngularJS - 在自定义指令中访问 ng-click

Question

我试图了解指令，我可以轻松地使用模板函数来丢弃我的 HTML，但是，如果我的模板中有一个 ng-click，我如何在链接函数中访问它？

我的指令:

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

如您所见，我添加了 $scope.scrollRight给我的 link功能，但是在单击时，控制台中不会出现任何内容。

如果我放置:

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

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

在我的 Controller 中(并且在我的指令之外)，它按预期工作。

任何帮助表示赞赏。

Answer 1

您的链接功能定义如下:

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

但是您正在 $scope 上编写函数多变的:

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

在这种情况下， $scope 实际上并没有注入(inject)到链接函数中(并且不能被注入(inject))，所以链接只是带有参数的简单函数。您应该更改 $scope至 scope它应该工作:

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