AngularJS – доступ к ng-click в пользовательской директиве

Я пытаюсь понять директивы, я могу легко использовать функцию шаблона, чтобы выбросить свой HTML, однако, если у меня есть ng-щелчок в моем шаблоне, как я могу получить к нему доступ в функции ссылки?

Моя директива:

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

В моем контроллере (и вне моей директивы) он работает так, как ожидалось.

Любая помощь приветствуется.


angularjs angularjs-directive angularjs-scope angularjs-ng-click
person Oam Psy    schedule 23.06.2014    source источник
comment
@DavinTryon - Спасибо, что указали на это.   -  person Oam Psy    schedule 23.06.2014
comment
@proxygear: это не опечатка. Это отсутствие понимания со стороны пользователей в то время.   -  person Animesh    schedule 20.10.2016

Ответы (2)


arrow_upward
17
arrow_downward

Ваша функция ссылки определяется следующим образом:

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");
    };
person domakas    schedule 23.06.2014
comment
похоже, это сработало, и как мне получить доступ к идентификатору раздела, который я передаю ngClick в моей функции scrollRight/Left? - person Oam Psy; 23.06.2014
comment
scope.scrollLeft = function (param) { console.log(param); }; это работает так же, как и простой JS - передача параметров в функции соответствует параметрам в объявлении функции - person domakas; 23.06.2014

arrow_upward
0
arrow_downward

Вы уверены, что параметр функции ссылки называется scope, а не $scope?

person Gildor    schedule 23.06.2014
comment
@threed Я знаю ... На самом деле я имел в виду, что имя параметра отличается от того, что используется ниже в коде, если вы присмотритесь ... И я считаю, что это была основная причина. - person Gildor; 01.09.2015