javascript Angularjs - ng-click 函数与指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30184999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs - ng-click function vs directive
提问by Body
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?
我无法决定在以下情况下使用哪种方法。我试图在单击按钮时发出警报。我可以使用 2 种方法来做到这一点。哪个是最佳实践，请告诉我为什么？
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
谢谢你，乳山
采纳答案by jad-panda
Let me explain it to you using example.
让我用例子向你解释。
HTML
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
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);
});
}
};
});
As you can see in the example show-alert="[MSG]"was able to reduce code replication compared to directly using $scope.showAlertin each controller. so in this case creating directive was better.
正如您在示例中show-alert="[MSG]"所看到的，与$scope.showAlert在每个控制器中直接使用相比，能够减少代码复制。所以在这种情况下，创建指令更好。
But, in case of $scope.showConsolewas used only once, we are not reusing it anywhere. so its fine to use it directly inside controller.
但是，如果$scope.showConsole只使用了一次，我们不会在任何地方重复使用它。所以可以直接在控制器内部使用它。
Even though. you can also create directive for showConsolefunctionality, 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.
虽然。您还可以为showConsole功能创建指令，如果您觉得将来它也会在其他地方使用。它完全没问题。这个决定完全取决于你有什么用例。
回答by Ufuk Hac?o?ullar?
If all elements have to run the same function on click event, making it a directive is a good idea. Otherwise use ngClick. Creating a directive and then passing a click handler function is reimplemeting the same thing.
如果所有元素都必须在单击事件上运行相同的函数，那么将其设为指令是一个好主意。否则使用 ngClick。创建一个指令然后传递一个点击处理函数是重新实现同样的事情。
