web-dev-qa-db-ja.com

AngularJS-カスタムディレクティブでng-clickにアクセスする

ディレクティブを回避しようとしていますが、テンプレート関数を使用して簡単に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");
};

私のコントローラーでは（そして私のディレクティブではありません）、期待どおりに動作します。

助けてくれてありがとう。

angularjsangularjs-directiveangularjs-scopeangularjs-ng-click
14
Oam Psy

リンク関数は次のように定義されています：

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

リンク関数のパラメーターの名前は$scopeではなくscopeになっていますか？

0
Gildor