在angularjs开发中，ng-click是最常用的事件指令之一，用于绑定元素的点击事件。实际业务场景中，我们往往需要在点击触发事件时传递额外的参数，比如列表项的id、当前操作的数据对象等，下面详细介绍几种常见的传参方式。
直接传递基本类型参数
如果只需要传递字符串、数字等基本类型的参数，可以直接在ng-click的表达式中把参数写在函数调用里，这种方式最简单直接。
首先在控制器中定义对应的事件处理函数：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
// 接收基本类型参数的事件处理函数
$scope.handleClick = function(id, name) {
console.log('传递的id是：' + id);
console.log('传递的name是：' + name);
};
}]);
然后在HTML模板中绑定ng-click时直接传入参数：
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="handleClick(1001, '测试用户')">点击传递基本参数</button>
</div>
传递对象类型参数
如果需要传递多个相关的参数，或者传递复杂的数据结构，直接传递对象会更方便，也便于后续扩展。
控制器中的处理函数可以接收整个对象：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.userList = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22}
];
// 接收对象参数的事件处理函数
$scope.handleUserClick = function(user) {
console.log('用户id：' + user.id);
console.log('用户姓名：' + user.name);
console.log('用户年龄：' + user.age);
};
}]);
模板中可以直接把对象作为参数传入：
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="user in userList">
{{user.name}}
<button ng-click="handleUserClick(user)">查看用户详情</button>
</li>
</ul>
</div>
传递$event事件对象
有时候我们需要在事件处理函数中获取原生的DOM事件对象，比如获取点击元素的信息、阻止事件冒泡等，这时候可以传递angularjs内置的$event参数。
处理函数接收$event对象：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.handleEventClick = function($event, extraParam) {
// 阻止事件冒泡
$event.stopPropagation();
console.log('点击的元素是：', $event.target);
console.log('额外参数：' + extraParam);
};
}]);
模板中传入$event和其他参数：
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="handleEventClick($event, '额外信息')">点击传递事件对象</button>
</div>
传参注意事项
- ng-click中的表达式是在当前作用域下执行的，所以传递的参数必须是当前作用域下可访问的变量，或者字面量。
- 如果传递的字符串参数包含特殊字符，比如引号，需要做转义处理，避免语法错误。
- 不要传递过于复杂或者体积很大的对象，避免影响性能，必要时可以只传递对象的唯一标识，再在处理函数中根据标识查询完整数据。
- 如果参数中包含html标签相关的字符，比如<、>，在传递时不需要额外转义，angularjs会自动处理表达式的解析，但在显示到页面时需要注意防止xss攻击。
常见问题解答
为什么传递的参数在函数中是undefined？
这种情况通常是因为ng-click中传递的参数名和函数定义的形参不一致，或者参数在当前作用域下不存在。可以检查参数名拼写，以及确认参数是否在当前控制器的作用域中定义。
可以传递多个不同类型的参数吗？
可以，ng-click的函数调用支持传递多个任意类型的参数，只要和事件处理函数的形参顺序对应即可，比如可以同时传递基本类型、对象、$event等。