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

Answer 2

您确定链接功能参数名为scope，而不是$scope吗？

AngularJS - 在custom指令中访问ng-click

2 个答案: