Javascript 如何在onclick函数中传递angular js变量作为参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32377632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to pass angular js variable inside onclick function as parameter
提问by uday s
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?
我试图将 AngularJS 变量作为参数值传递给 onclick() 来调用 javascript 函数。任何人都可以指导我如何做吗？
My code:
我的代码：
<div onclick="deleteArrival({{filterList.id}})" class="table-icon deleteIcon">{{filterList.id}}</div>
回答by SixteenStudio
You should be using ng-click, there is no reason to use onclick as angular provides you with this functionality
您应该使用 ng-click，没有理由使用 onclick，因为 angular 为您提供了此功能
<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
然后你应该将你的函数移动到你的 AngularJS 控制器中，并将它绑定到作用域
$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:
如果您绝对需要使用 onclick 来调用外部函数，您可以在您的范围内将函数更改为类似的内容，仍然使用上面的 ng-click 属性：
$scope.deleteArrival = function(filterListId) { window.deleteArrival(filterListId); };
However I can't see a reason not to move it into your scope
但是我看不出有什么理由不把它移到你的范围内
回答by Pichet Thantipiputpinyo
If you still want to use onclick , this is work for me , I hope it work for you too.
如果你仍然想使用 onclick ，这对我有用，我希望它也对你有用。
<div id="{{filterList.id}}" onclick="deleteArrival(this.id)" class="table-icon deleteIcon">{{filterList.id}}</div>
回答by Jailhouse Joe
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.
我不会再猜测你不使用 ng-click 的原因，因为其他贡献者已经指出你真的“应该”。但是，如果您真的想要/需要，我的建议是使用“this”和数据属性。
<div data-filterListId="{{filterList.id}}" onclick="deleteArrival(this)" class="table-icon deleteIcon">{{filterList.id}}</div>
function deleteArrival(arrivalElem) {
alert('myId=' + arrivalElem.getAttribute("data-filterListId"));
}
回答by gaurav bhavsar
You could easily solve your problem using ng-clickbut you should have deleteArrivalmethod in your scope.
您可以使用轻松解决问题，ng-click但您deleteArrival的范围内应该有方法。
Markup
标记
<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
{{filterList.id}}
</div>
回答by Pankaj Parkar
Above thing is easily possible using ng-clickdirective 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.
上面的事情很容易使用ng-click指令并在控制器范围内拥有该功能，唯一的问题是您需要将您的java脚本函数引用分配给控制器范围变量。无需再次重写作用域中的函数。传递函数的引用就可以了。
Markup
标记
<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
{{filterList.id}}
</div>
Controller
控制器
//assign javascript method reference in controller
$scope.deleteArrival = deleteArrival;
回答by Alhuck A
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.
不允许在 angularjs 中为事件处理程序属性（如 onclick、onload、onsubmit 等）创建绑定，因为绑定到这些属性没有实际价值，这样做只会将您的应用程序暴露给 XSS 等安全漏洞。由于这些原因，angularjs 不支持绑定到事件处理程序属性（所有以 on 和 formaction 属性开头的属性）。
For your case,
对于你的情况，
Inside ng-repeat, use ng-clickfor sending values to your function and declare that function in controller.
在内部ng-repeat，ng-click用于将值发送到您的函数并在控制器中声明该函数。
See here for documentation of ng-click
Hope this helps !
希望这可以帮助 ！
回答by vbouk
try this without the curly braces deleteArrival(filterList.id)
试试这个没有花括号 deleteArrival(filterList.id)
回答by ddsh79
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.
我有一个案例，由于窗口绑定，我无法使用 ng-click。没有得到直接答复，但以下内容对我有用。我知道这不是一个好的解决方案，但在我的情况下是可行的。
angular.element(this).scope().ctrlName.variable
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)"
onclick="test(angular.element(this).scope().ctrlName.ObjName.variable)"
回答by Abhishek kumar Sharma
$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>