Angularjs - funzione ng-click vs direttiva

Question

Non riesco a decidere quale metodo utilizzare nel seguente caso. Sto cercando di avvisare quando clicchi sui pulsanti. Posso farlo usando 2 metodi. Qual è la migliore pratica e per favore dimmi perché?

Metodo 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'); 
     }) 
     } 

    } 
    }) 

Metodo 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'); 
    } 
}]); 

Grazie, Rushan

Answer 1

Lascia che te lo spieghi usando l'esempio.

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

Come si può vedere nell'esempio show-alert="[MSG]" è stato in grado di ridurre la replicazione del codice rispetto all'utilizzo direttamente $scope.showAlert in ogni controller. quindi in questo caso la creazione della direttiva era migliore.

Tuttavia, in caso di $scope.showConsole è stato utilizzato solo una volta, non lo riutilizziamo da nessuna parte. quindi è bene usarlo direttamente all'interno del controller.

Anche se. puoi anche creare una direttiva per la funzionalità showConsole, se ti sembra che in futuro verrà utilizzata anche altrove. è completamente bene. questa decisione dipende totalmente dal caso d'uso che hai.

Answer 2

Se tutti gli elementi devono eseguire la stessa funzione su evento click, il che rende una direttiva è una buona idea. Altrimenti usa ngClick. La creazione di una direttiva e il passaggio di una funzione di gestione dei clic reimplora la stessa cosa.