Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs - ng-click function vs directive

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

like image 364
Body Avatar asked May 12 '15 07:05

Body


People also ask

What is the difference between Ng-click and Onclick?

Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.

What is Ng-click in AngularJS?

The ng-click directive tells AngularJS what to do when an HTML element is clicked.

Can we call two functions on Ng-click?

In this article, we will learn how to get many/multiple functions to the ng-click directive passed, in just one click. The key is to add a semi-colon (;) or a comma (,). All the functions must be separated by a (;) or a (, ). This syntax is supported by all the elements in the HTML.

What is difference between controller and directive AngularJS?

A controller is usually used to contain and maintain the logic for your view, which gets bound to your view via $scope. A directive is something that you might use repeatedly and is called in your view directly through the directive name which you can pass in as an attribute.


2 Answers

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.

like image 169
jad-panda Avatar answered Oct 19 '22 05:10

jad-panda


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.

like image 44
Ufuk Hacıoğulları Avatar answered Oct 19 '22 04:10

Ufuk Hacıoğulları