web-dev-qa-db-ja.com

Angularjs-ng-クリック関数とディレクティブ

次の場合、どちらの方法を使うか決められません。ボタンをクリックしたときにアラートを出そうとしています。私は2つの方法を使用してこれを行うことができます。ベストプラクティスはどれですか。その理由を教えてください。

方法1

<div ng-app="app">
  <button alert>directive</button>
</div>

var app = angular.module('app', ['ngRoute']);

app
  .directive('alert', function(){
    return {

      link: function(scope, element, attr) {
            element.on('click', function(){
          alert('clicked');
        })
      }

    }
  })

方法2

<div ng-app="app" ng-controller="MainCtrl">
  <button ng-click="go()">ng-click</button>  
</div>

app.controller('MainCtrl', ['$scope', function($scope) {

  $scope.go = function() {
    alert('clicked');
  }
}]);

ありがとう、ルーシャン

javascriptangularjsangularjs-directiveangularjs-ng-click
11
Body

例を使って説明させてください。

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <button ng-click="showAlert('hello')">Fist</button>
        <button ng-click="showConsole('hello')">for Fist one only</button>
        <button show-alert="first using directive">Fist with directive</button>
    </div>
    <div ng-controller="MyCtrl2">
        <button ng-click="showAlert('hello second')">Second</button>
        <button show-alert="first using directive">Second With directive</button>
    </div>
    <div ng-controller="MyCtrl3">
        <button ng-click="showAlert('hello third')">Third</button>
        <button show-alert="third using directive">third with directive</button>
    </div>
 </div>

JS

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope) {
        $scope.showAlert = function (msg) {
            alert(msg);
        };
        $scope.showConsole = function (msg) {
            console.log(msg);
        };
    })
    .controller('MyCtrl2', function ($scope) {
        $scope.showAlert = function (msg) {
            alert(msg);
        };

    })
    .controller('MyCtrl3', function ($scope) {
        $scope.showAlert = function (msg) {
            alert(msg);
        };        
    })
    .directive('showAlert', function(){
        return{
            restrict: 'A',
            link: function(scope, ele, attr){
                var eventName = attr.evetName || 'click';
                var mas = attr.showAlert || 'just alert';
                ele.on(eventName, function(){
                   alert(mas); 
                });
            }
        };
    });

JsFiddleLink

例でわかるように、show-alert="[MSG]"は、各コントローラーで$scope.showAlertを直接使用する場合と比較して、コードの複製を減らすことができました。したがって、この場合、ディレクティブの作成の方が優れていました。

ただし、$scope.showConsoleを1回だけ使用した場合は、どこでも再利用していません。したがって、コントローラー内で直接使用しても問題ありません。

たとえ。 showConsole機能のディレクティブを作成することもできます。将来、他の場所でも使用されるように思われる場合は、その完全に素晴らしい。この決定は、使用例によって異なります。

11
jad-panda

クリックイベントですべての要素が同じ関数を実行する必要がある場合は、それをディレクティブにすることをお勧めします。それ以外の場合はngClickを使用します。ディレクティブを作成してからクリックハンドラー関数を渡すことは、同じことを再実装することです。

2
Ufuk Hacıoğulları