AngularJS - 在custom指令中访问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");
};

在我的控制器中(并且在我的指令中),它按预期工作.

任何帮助赞赏.

Answer 1

您的链接功能定义如下:

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

但是你在$scope变量上编写函数:

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

在这种情况下,$ scope实际上没有注入到链接函数中(并且不能注入),因此链接只是带参数的简单函数.你应该改变$scope到scope它应该工作:

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