CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
uday s
uday s

Reputation: 291

how to pass angular js variable inside onclick function as parameter

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>

Upvotes: 19

Views: 65721

Answers (10)

Brian Dudey
Brian Dudey

Reputation: 1

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.

Upvotes: 0

Abhishek kumar Sharma
Abhishek kumar Sharma

Reputation: 41

   $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>

Upvotes: 0

Pichet Thantipiputpinyo
Pichet Thantipiputpinyo

Reputation: 234

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>

Upvotes: 7

SixteenStudio
SixteenStudio

Reputation: 1026

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

Upvotes: 27

ddsh79
ddsh79

Reputation: 119

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)"

Upvotes: 0

Jailhouse Joe
Jailhouse Joe

Reputation: 63

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

Upvotes: 3

Alhuck
Alhuck

Reputation: 1029

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 !

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

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;

Upvotes: 1

gaurav bhavsar
gaurav bhavsar

Reputation: 2043

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>

Upvotes: 2

vbouk
vbouk

Reputation: 298

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

Upvotes: 0

Related Questions