Angularjs - ng-click 函数与指令 [英] Angularjs - ng-click function vs directive

问题描述

我无法决定在以下情况下使用哪种方法.我试图在单击按钮时发出警报.我可以使用 2 种方法来做到这一点.哪个是最佳实践，请告诉我为什么?

方法一

<button alert>指令</button>

<小时>

var app = angular.module('app', ['ngRoute']);应用程序.directive('警报', 函数(){返回 {链接:函数(范围，元素，属性){element.on('点击', function(){警报('点击');})}}})

方法二

<button ng-click="go()">ng-click</button>

<小时>

app.controller('MainCtrl', ['$scope', function($scope) {$scope.go = function() {警报('点击');}}]);

谢谢，乳山

解决方案

让我用例子给你解释一下.

HTML

<div ng-controller="MyCtrl1"><button ng-click="showAlert('hello')">拳头</button><button ng-click="showConsole('hello')">仅用于第一个 </button><button show-alert="first using directive">Fist with Directive</button>
<div ng-controller="MyCtrl2"><button ng-click="showAlert('hello second')">Second</button><button show-alert="第一次使用指令">第二次使用指令</button>

<div ng-controller="MyCtrl3"><button ng-click="showAlert('hello第三')">第三</button><button show-alert="第三个使用指令">第三个使用指令</button>

JS

var myApp = angular.module('myapp',[]);我的应用程序.controller('MyCtrl1', function ($scope) {$scope.showAlert = 函数(味精){警报(味精)；};$scope.showConsole = 函数(味精){控制台日志(味精)；};}).controller('MyCtrl2', function ($scope) {$scope.showAlert = 函数(味精){警报(味精)；};}).controller('MyCtrl3', function ($scope) {$scope.showAlert = 函数(味精){警报(味精)；};}).directive('showAlert', function(){返回{限制:'A'，链接:函数(范围，元素，属性){var eventName = attr.evetName ||'点击';var mas = attr.showAlert ||'只是警觉';ele.on(事件名称，函数(){警报(mas)；});}};});

JsFiddleLink

如您在示例中所见，与在每个控制器中直接使用 $scope.showAlert 相比，show-alert="[MSG]" 能够减少代码复制.所以在这种情况下，创建指令会更好.

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

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

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?

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

    }
  })

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

Thank you, Rushan

解决方案

Let me explain it to you using example.

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

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.

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.

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 函数与指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！