Detect that a function was called from ngclick in angularjs

Question

Say I have an ng-click event on an button

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

And in my AngularJS Controller I have something like

myApp.controller('myController', ['$scope', function ($scope)] {
    $scope.callMe = function() {
        console.log("call originated from...");
    };

    $scope.anotherMethod = function(){
        $scope.callMe();
    }
});

Can I tell from inside the callMe method where it was called from? i.e. did the user trigger it when clicking on the button or was it from the anotherMethod method?

Ideally, I'd like not to have to pass around additional variables inside my function calls. e.g.

callMe('fromClick')

Thanks

you COULD use arguments.callee.caller, but it is officially deprecated and won't work in strict mode: jsfiddle.net/P24dY/1 — basilikum
– basilikum, Commented Apr 28, 2014 at 17:53

basilikum · Accepted Answer · 2014-04-28 18:00:37Z

2

If you have to perform different tasks, when the function was triggered by a click or by something else, my suggestion would be to use different functions and only use the same function for the tasks that are actually the same:

HTML

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

JavaScript

myApp.controller('myController', ['$scope', function ($scope)] {

    $scope.onClick = function () {
        //do click related tasks 

        callMe();
    };

    $scope.anotherMethod = function(){
        //do other tasks

        callMe();
    };

    function callMe() {
        //do stuff that has to be done in both cases
    }
});

answered Apr 28, 2014 at 18:00

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:33:00Z

0

You can do:

<button ng-click="callMe($event)" />

$scope.callMe = function($event) {
    console.log("call originated from..." + $event.target);
};

But this goes agains't AngularJS phisolophy (hurts the separation between view and controller). Check out Accessing clicked element in angularjs for a more complete answer with an alternative solution.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Apr 28, 2014 at 17:57

Anthony Accioly

22.6k9 gold badges76 silver badges125 bronze badges

Comments

jhays · Accepted Answer · 2014-04-28 18:23:13Z

0

What I've done to do this is use $broadcast.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Here is an example of use:

You need to pass $rootScope to your controller

myApp.controller('myController', ['$scope, $rootScope', function ($scope, $rootScope)] {

Then in your $scope.callMe():

$scope.callMe = function() {
  console.log("call originated from...");
  $rootScope.$broadcast('callThis')
};

Lastly in your $scope.anotherMethod():

$scope.isCallThis = false

$scope.anotherMethod = function () {
  if (!$scope.isCallThis) {
    $scope.$on('callThis', function () {
      // Do stuff here
    })

    $scope.isCallThis = true
  }
}

I used the $scope.isCallThis = false to make sure you are only setting the $scope.$on() once.

I hope this helps, I usually use this when I'm creating directives and I need to trigger a block of code.

edited Apr 28, 2014 at 18:23

answered Apr 28, 2014 at 18:05

jhays

765 bronze badges

2 Comments

basilikum Over a year ago

you are adding a new event handler every time the function anotherMethod is called.

jhays Over a year ago

Oh right. I forgot if I use it in the controller I usually place a boolean check around it so it only runs once.

Collectives™ on Stack Overflow

Detect that a function was called from ngclick in angularjs

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related