how to pass angular js variable inside onclick function as parameter

Question

I have tried to pass AngularJS variable as argument value inside onclick() to call javascript function. Can anyone guide me on how to do it?

My code:

 <div onclick="deleteArrival({{filterList.id}})" class="table-icon deleteIcon">{{filterList.id}}</div>

Is there any special reason that you are not using onclick? Using ng-click should be fine — Pankaj Parkar
– Pankaj Parkar, Commented Sep 3, 2015 at 13:58
In my case, the reason to use onclick instead of ng-click is to use a function inside a Utility class I reuse in multiple projects. This way I don't have rewrite the function into every controller. — Running Buffalo
– Running Buffalo, Commented Mar 29, 2019 at 16:08

ΩmegaMan · Accepted Answer · 2017-08-25 19:28:51Z

27

You should be using ng-click, there is no reason to use onclick as angular provides you with this functionality

<div ng-click="deleteArrival(filterList.id)" 
     class="table-icon deleteIcon">{{filterList.id}}</div>

You should then move your function into your AngularJS Controller, and bind it to the scope

$scope.deleteArrival = function(filterListId) { ... };

If you ABSOLUTELY need to use onclick to call an external function, you could change the function to something like this in your scope, still using the ng-click attribute above:

$scope.deleteArrival = function(filterListId) { window.deleteArrival(filterListId); };

However I can't see a reason not to move it into your scope

edited Aug 25, 2017 at 19:28

ΩmegaMan

32.2k13 gold badges110 silver badges138 bronze badges

answered Sep 3, 2015 at 13:59

SixteenStudio

1,04611 silver badges24 bronze badges

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

2 Comments

Neville Nazerane Over a year ago

i am facing a similar issue. I could list out the reasons I don't want to use the scope... but I really don't get why angular can't just allow "onclick" like any other attribute

Leon Over a year ago

There are many reasons why he might want to use an onclick instead of ng-click, we most obvious being that he is relying on a large javascript library which is not written in Angular.

Pichet Thantipiputpinyo · Accepted Answer · 2017-09-20 19:52:01Z

7

If you still want to use onclick , this is work for me , I hope it work for you too.

<div id="{{filterList.id}}" onclick="deleteArrival(this.id)" class="table-icon deleteIcon">{{filterList.id}}</div>

answered Sep 20, 2017 at 19:52

Pichet Thantipiputpinyo

2342 silver badges4 bronze badges

4 Comments

Khanh Tran Over a year ago

Awesome! Thanks a lot. The reason that I can't use ng-click is in <uib-accordion-header>. In this accordion, header is default to expand/collapse content. In order to prevent expand/collapse and have custom action, I have to use ng-click to handle $event.preventDefault() and $event.stopPropagation() then onclick for my custom action.

Ewald Bos Over a year ago

this would work for a single variable, how would one do this with the "item in items" as example in a ng-repeat? Send the complete "item"

ItJustWerks Over a year ago

FYI, I had a situation where I had a directive that could only be triggered by clicking it, but I needed to actually trigger it by clicking a different element. Calling document.querySelector('#directive-id').click() in the console worked, but when I moved that script into an ng-click function on the element I actually needed to click it threw a bunch of scope errors. Turned out using <element-to-click id="{{directive-id}}" onclick="document.querySelector('#' + this.id).click()"> worked perfectly! Thanks!

Hans Karlsen Over a year ago

You can add all arguments like this by introducing your own attributes ; p1,p2,p3: <button p1="{{data.SysUserGuid}}" p2="{{data.SysUserSecurityStamp}}" p3="{{data.PayAmount}}" onclick="bringupBuyMCoinsConsumer(this.getAttribute('p1'),this.getAttribute('p2'),this.getAttribute('p3'));" >Buy</button>

Jailhouse Joe · Accepted Answer · 2017-05-26 14:25:29Z

3

Im not going to second guess your reasons for not using ng-click, as other contributors have pointed out you really 'ought'. However if you really want/need to, heres my suggestion by using 'this' and data attributes.

<div data-filterListId="{{filterList.id}}" onclick="deleteArrival(this)" class="table-icon deleteIcon">{{filterList.id}}</div>
function deleteArrival(arrivalElem) {
    alert('myId=' + arrivalElem.getAttribute("data-filterListId"));
}

answered May 26, 2017 at 14:25

Jailhouse Joe

636 bronze badges

1 Comment

Mazdak Over a year ago

if someone needs to pass data out of scope of angularjs this answer could be helpful

Pankaj Parkar · Accepted Answer · 2015-09-03 14:03:19Z

2

You could easily solve your problem using ng-click but you should have deleteArrival method in your scope.

Markup

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
  {{filterList.id}}
</div>

edited Sep 3, 2015 at 14:03

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Sep 3, 2015 at 13:54

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

5 Comments

gaurav bhavsar Over a year ago

Yes, I suggest him to use ng-click as he is using angularJS.

uday s Over a year ago

i need to use onclick('hi'); like this. but the data has been get from ng-repeat.i understood your idea. but i need like this.. I want to call javascript function.so that i ask it bro

Pankaj Parkar Over a year ago

@gauravbhavsar I added comment because you said No need to use {{}} inside ng-click Though the user has used onclick

gaurav bhavsar Over a year ago

@PankajParkar ahh ! Thanks

Pankaj Parkar Over a year ago

@gauravbhavsar Thats look better now +1

Pankaj Parkar · Accepted Answer · 2015-09-03 14:05:14Z

1

Above thing is easily possible using ng-click directive and having that function inside controller scope, only the thing is you need to assign your java-script function reference to controller scope variable. No need to rewriting the function in your scope again. Pass the reference of function will do the trick.

Markup

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
   {{filterList.id}}
</div>

Controller

//assign javascript method reference in controller
$scope.deleteArrival = deleteArrival;

answered Sep 3, 2015 at 14:05

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Alhuck · Accepted Answer · 2015-09-03 15:10:38Z

1

You are not allowed to create a binding for event handler attributes like onclick, onload, onsubmit, etc. in angularjs because, there is no practical value in binding to these attributes and doing so it only exposes your application to security vulnerabilities like XSS. For these reasons binding to event handler attributes (all attributes that start with on and formaction attribute) is not supported in angularjs.

For your case,

Inside ng-repeat, use ng-click for sending values to your function and declare that function in controller.

See here for documentation of ng-click

Hope this helps !

answered Sep 3, 2015 at 15:10

Alhuck

1,0298 silver badges11 bronze badges

1 Comment

Phung D. An Over a year ago

there IS practical value , at least for my case. onclick="legacyOrGlobalMethod({{product.id}})"

vbouk · Accepted Answer · 2015-09-03 13:55:21Z

0

try this without the curly braces deleteArrival(filterList.id)

answered Sep 3, 2015 at 13:55

vbouk

2982 silver badges7 bronze badges

Comments

ddsh79 · Accepted Answer · 2017-07-05 16:42:53Z

0

I had a case where I could not use ng-click due to window binding. Did not get direct answer but the below did work for me. I know it is not a good solution but workable in my case.

angular.element(this).scope().ctrlName.variable

You can try using your own class structure. So the click will be as below:

onclick="test(angular.element(this).scope().ctrlName.ObjName.variable)"

answered Jul 5, 2017 at 16:42

ddsh79

1195 bronze badges

Comments

Abhishek kumar Sharma · Accepted Answer · 2018-05-10 16:41:17Z

0

   $scope.getpop = function(id){
       alert(id);
    }

<span ng-click='getpop({{x.Code}})' class="btn-default btn">{{ x.title }}</span> 

<b>This works perfect for me !</b>

answered May 10, 2018 at 16:41

Abhishek kumar Sharma

419 bronze badges

Comments

Brian Dudey · Accepted Answer · 2021-01-12 17:27:42Z

0

My use case was where my application is relying on a large JavaScript file of functions that are not written in Angular. For this, I added a function in my controller that connects to one of these JS functions:

$scope.controllerFunction = function() {
  javaScriptFunction('foo');
}

javascriptFunction(parameter){
  let variable = parameter
}

Then in my view, making use of ng-click, I accessed the controller function with:

 ng-click="controllerFunction()"

For me, the "onclick="deleteArrival(this.id)" example returns undefined. The above was the best solution.

answered Jan 12, 2021 at 17:27

Brian Dudey

11 bronze badge

Collectives™ on Stack Overflow

how to pass angular js variable inside onclick function as parameter

10 Answers 10

2 Comments

4 Comments

1 Comment

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

4 Comments

1 Comment

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related