Angularjs

Question

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

方法一

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

    }
  })

方法二

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

谢谢，乳山

Answer 1

如果所有元素都必须运行在单击事件上具有相同的功能，将其设为指令是个好主意。否则使用 ngClick。创建一个指令然后传递一个点击处理函数是在重新实现同样的事情。

Answer 2

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

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

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

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

虽然。您还可以为 showConsole 功能创建指令，如果您觉得将来它也会在其他地方使用。完全没问题。这个决定完全取决于你有什么用例。

Angularjs - ng-click 函数与指令

Angularjs - ng-click function vs directive

javascript

angularjs-directive

angularjs-ng-click