Angularjs - ng-click fonction vs directive

Je ne peux pas décider de la méthode à utiliser dans les cas suivants. Je suis tenté d'alerter en cliquant sur les boutons. Je peux le faire à l'aide de 2 méthodes. Quelle est la meilleure pratique et s'il vous plaît dites-moi pourquoi?

Méthode 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');
        })
      }

    }
  })

Méthode 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');
  }
}]);

Merci,
Rushan

source d'informationauteur Body

  1. 11

    Permettez-moi de vous expliquer cela à l'aide de l'exemple.

    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

    Comme vous pouvez le voir dans l'exemple show-alert="[MSG]" a été en mesure de réduire le code de la réplication par rapport à directement à l'aide de $scope.showAlert dans chaque contrôleur. dans ce cas, la création de directive a été mieux.

    Mais, en cas de $scope.showConsole a été utilisé qu'une seule fois, nous ne sommes pas réutiliser n'importe où. donc, il est légitime de les utiliser directement à l'intérieur du contrôleur.

    Même si. vous pouvez également créer directive pour showConsole de la fonctionnalité, si vous vous sentez comme dans l'avenir, il sera utilisé ailleurs aussi. son tout à fait bien. cette décision dépend totalement de ce que le cas d'utilisation que vous avez.

  2. 2

    Si tous les éléments doivent exécuter la même fonction sur l'événement click, faisant d'elle une directive est une bonne idée. Sinon utiliser ngClick. La création d'une directive, puis en passant une fonction de gestionnaire de clic est reimplemeting la même chose.