70

I have multiple elements with the same callback on ng-click:

<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
// In controller:
$scope.doSomething = function() {
  // How do I get a reference to the button that triggered the function?
};

How can I get the reference to the object which made the call to doSomething? (I need to remove an attr from it)

2
  • 5
    What are you trying to accomplish? Why do you need to remove an attribute? The whole point of AngularJS is the fact you don't have to do DOM manipulation.
    – testing123
    Jun 21, 2013 at 16:54
  • Each button toggles the readonly attribute on different inputs
    – jviotti
    Jun 21, 2013 at 16:57

2 Answers 2

224

While you do the following, technically speaking:

<button ng-click="doSomething($event)"></button>
// In controller:
$scope.doSomething = function($event) {
  //reference to the button that triggered the function:
  $event.target
};

This is probably something you don't want to do as AngularJS philosophy is to focus on model manipulation and let AngularJS do the rendering (based on hints from the declarative UI). Manipulating DOM elements and attributes from a controller is a big no-no in AngularJS world.

You might check this answer for more info: https://stackoverflow.com/a/12431211/1418796

8
  • How should I accomplish this in Angular's way? Each button toggle the readonly attribute in different inputs
    – jviotti
    Jun 21, 2013 at 17:22
  • @jviotti Impossible to help you precisely without live code example. I guess the answer is in using the ng-readonly directive. But I would suggest opening another question with a live code example in plnkr.co Jun 21, 2013 at 17:33
  • 2
    I guess $event.currentTarget gives the current dom element Jul 25, 2014 at 16:41
  • 1
    In regards to your comment about no DOM manipulating in a controller, it's perfectly acceptable in a directive's controller.
    – Sean256
    Jul 13, 2015 at 6:54
  • 7
    "Manipulating DOM elements and attributes from a controller is a big no-no in AngularJS world." Except when you have to, of course...
    – iGanja
    Mar 8, 2016 at 18:27
23

The angular way is shown in the angular docs :)

https://docs.angularjs.org/api/ng/directive/ngReadonly

Here is the example they use:

<body>
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular"/>
</body>

Basically the angular way is to create a model object that will hold whether or not the input should be readonly and then set that model object accordingly. The beauty of angular is that most of the time you don't need to do any dom manipulation. You just have angular render the view they way your model is set (let angular do the dom manipulation for you and keep your code clean).

So basically in your case you would want to do something like below or check out this working example.

<button ng-click="isInput1ReadOnly = !isInput1ReadOnly">Click Me</button>
<input type="text" ng-readonly="isInput1ReadOnly" value="Angular Rules!"/>
8
  • 2
    Why the down vote? If there is something that is wrong I would love to learn what it is.
    – testing123
    Mar 14, 2014 at 23:51
  • 22
    I understand wanting to use a different approach. I don't understand a down vote for a completely valid and IMHO a better approach.
    – testing123
    Mar 22, 2014 at 2:40
  • 1
    +1 for pointing out the better approach. I'm kind of new to angular and it'll take some time to get things done using your approach. Unfortunately I'll have to use the other answer until I migrate my code..
    – tftd
    Feb 23, 2016 at 22:45
  • 1
    upvoted for a different approach. But still is there a way to find out which elements button was clicked. Aug 3, 2016 at 6:11
  • 8
    This helps the SO, but it doesn't answer this question, and therefore should not be the accepted answer, even though it was the solution to the SO's problem. I came here looking for an answer to the same question for a completely valid reason and was not helped by your answer, as it addresses the problem, not the question. For the sake of the readers, please answer the question asked. If you feel there is a better solution, provide a suggestion for that solution in the comments section and continue your discussion with the SO in chat. Aug 4, 2016 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.