AngularJS - 在自定义指令中访问 ng-click [英] AngularJS - accessing ng-click in custom directive

问题描述

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

I'm trying to get my head around directives, i can easily use the template function to throw out my HTML, however, if i have an ng-click within my template, how can i access it within the link function?

我的指令:

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 函数中，但是单击时，控制台中没有任何显示.

As you can see, i have added $scope.scrollRight to my link function, however on click, nothing appears in the console.

如果我放置:

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

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

在我的控制器中(以及在我的指令之外)，它按预期工作.

In my controller (and out of my directive), it works as expected.

感谢任何帮助.

推荐答案

你的链接函数是这样定义的:

Your link function is defined like this:

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

然而你在 $scope 变量上编写函数:

however you are writing functions on $scope variable:

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

在这种情况下，$scope 实际上并没有注入到链接函数中(并且无法注入)，因此链接只是带有参数的简单函数.您应该将 $scope 更改为 scope 并且它应该可以工作:

In this case $scope is not actually injected into link function (and can't be injected), so link is just simple function with parameters. You should change $scope to scope and it should work:

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

这篇关于AngularJS - 在自定义指令中访问 ng-click的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！