如何在onclick函数中传递角度js变量作为参数

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?

我尝试在onclick()中传递AngularJS变量作为参数值来调用javascript函数。有人能指点我怎么做吗?

My code:

我的代码:

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

9 个解决方案

#1

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

您应该使用ng-click，没有理由使用onclick，因为角向您提供了此功能

<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

但是我看不出有什么理由不把它放到您的范围内

#2

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

您可以使用ng-click轻松解决问题，但是您应该在您的范围内使用deleteArrival方法。

Markup

标记

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

#3

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.

上面的东西很容易使用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;

#4

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这样的安全漏洞。由于这些原因绑定到事件处理程序属性(所有以on和formaction属性开头的属性)在angularjs中不受支持。

For your case,

对于你的情况,

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

在ng-repeat中，使用ng-click向函数发送值并在controller中声明该函数。

See here for documentation of ng-click

有关ng-click的文档，请参见这里

Hope this helps !

希望这可以帮助!

#5

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

#6

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

不要使用花括号deleteArrival(filterList.id)

#7

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

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

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 = "测试(angular.element(这).scope().ctrlName.ObjName.variable)”

#8

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>

#9

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