Angularjs - ng-click fonksiyonu vs direktif

Question

Aşağıdaki durumda hangi yöntemin kullanılacağına karar veremiyorum. Düğmelere tıkladığınızda uyarmaya çalışıyorum. Bunu 2 yöntemle yapabilirim. Hangi en iyi uygulama ve lütfen nedenini söyle?

Yöntem 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'); 
     }) 
     } 

    } 
    }) 

Yöntem 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'); 
    } 
}]); 

Teşekkür ederiz, Rushan

Answer 1

Örnek olarak size açıklayayım. 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

örneğin show-alert="[MSG]" görebileceğiniz gibi

doğrudan her denetleyici içinde $scope.showAlert kullanılmasına kıyasla kod çoğaltma azaltmak başardı. Yani bu durumda yönerge oluşturmak daha iyiydi.

Ancak, $scope.showConsole kullanılması durumunda yalnızca bir kez kullanıldık, hiçbir yerde yeniden kullanmıyoruz. Bu yüzden doğrudan kontrolör içinde kullanmak güzel. Her ne kadar olsa da,

. Ayrıca, showConsole işlevselliği için yönerge oluşturabilir, ileride başka bir yerde de kullanılacağını düşünüyorsanız. Tamamen iyi. Bu kararlar tamamen sahip olduğunuz kullanım durumuna bağlıdır.

Answer 2

Tüm öğelerin tıklama etkinliğinde aynı işlevi çalıştırması gerekiyorsa, bir yönerge yapmak iyi bir fikirdir. Aksi halde ngClick'i kullanın. Bir yönerge oluşturmak ve daha sonra bir tıklama işleyici işlevini iletmek aynı şeyi yeniden topluyor.