Angularjs - ng-click function vs directive [英] Angularjs - ng-click function vs directive

问题描述

我无法决定在以下情况下使用哪种方法。点击按钮时我正在尝试提醒。我可以用2种方法做到这一点。哪个是最佳做法，请告诉我原因？

I can't decide which method to use in following case. I'm trying to alert when clicking on buttons. I can do this using 2 methods. Which is the best practice and please tell me why?

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

谢谢你，
Rushan

Thank you, Rushan

推荐答案

让我用例子解释一下。

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 相比，能够减少代码复制。所以在这种情况下，创建指令更好。

As you can see in the example show-alert="[MSG]" was able to reduce code replication compared to directly using $scope.showAlert in each controller. so in this case creating directive was better.

但是，如果 $ scope.showConsole 仅使用一次，我们不会在任何地方重复使用它。所以它可以直接在控制器内使用它。

But, in case of $scope.showConsole was used only once, we are not reusing it anywhere. so its fine to use it directly inside controller.

尽管如此。您还可以为 showConsole 功能创建指令，如果您将来感觉它也将在其他地方使用。它完全没问题。这个决定完全取决于你的用例。

Even though. you can also create directive for showConsole functionality, if you feel like in future it will be used somewhere else also. its totally fine. this decisions totally depends on the what use-case you have.

这篇关于Angularjs - ng-click function vs directive的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！