web-dev-qa-db-ja.com

Angularディレクティブのリンク関数内でng-click vs bindを使用する

リンク関数には、関数をクリックイベントにバインドするためのより「角度のある」方法がありますか？

今、私はやっている...

myApp.directive('clickme', function() {   
  return function(scope, element, attrs) {
    scope.clickingCallback = function() {alert('clicked!')};
    element.bind('click', scope.clickingCallback);   
} });

これはAngularの方法ですか、それともいハックですか？おそらくそれほど心配するべきではありませんが、このフレームワークは初めてなので、特にフレームワークが進むにつれて、物事の「正しい」方法を知りたいと思います。

angularjsangularjs-directive
67
ehfeng

ディレクティブでコントローラーを使用できます：

angular.module('app', [])
  .directive('appClick', function(){
     return {
       restrict: 'A',
       scope: true,
       template: '<button ng-click="click()">Click me</button> Clicked {{clicked}} times',
       controller: function($scope, $element){
         $scope.clicked = 0;
         $scope.click = function(){
           $scope.clicked++
         }
       }
     }
   });

plunkrのデモ

Angular guide のディレクティブの詳細。そして、私にとって非常に役立ったのは、公式のAngularブログ投稿からのビデオでした それらのディレクティブについて 。

61
Maxim Grach

私は多くの人がこの方法でやっているのを見てきたので、それでいいと思います。

ただし、ディレクティブ内でイベントハンドラを定義するだけの場合、スコープで定義する必要はありません。以下は問題ありません。

myApp.directive('clickme', function() {
  return function(scope, element, attrs) {
    var clickingCallback = function() {
      alert('clicked!')
    };
    element.bind('click', clickingCallback);
  }
});
36
Tosh

単純にすべきではありません：

<button ng-click="clickingCallback()">Click me<button>

クリックイベントをスコープのコールバックにマッピングするだけの新しいディレクティブを作成する理由は何ですか？ ng-clickはすでにあなたのためにそれを行います。

10
Nikhil_Katre

以前の応答として提案されているように、ディレクティブでコントローラーを使用し、テンプレートhtmlでng-クリックする必要があります。ただし、ボタンのクリックなど、イベント（クリック）でDOM操作を行う必要がある場合は、ボタンの色などを変更し、リンク関数を使用して要素を使用してDOMを操作します。

HTML要素またはそのような非dom操作タスクに何らかの値を表示するだけであれば、ディレクティブは不要で、コントローラーを直接使用できます。

0
Hasteq