AngularJS中ng-click动态调用控制器函数问题求助

这个问题我之前也碰到过，核心原因是AngularJS的指令表达式里不需要用{{}}插值——ng-click内部是直接解析Angular作用域表达式的，你写的ctrl.{{key}}()会被当成字符串处理，自然没法动态调用函数。

正确的做法是用JavaScript的方括号属性访问语法，把函数调用改成这样：

<li ng-repeat="(key, value) in getusermenu">
  <a ng-click="ctrl[key]()" ng-href="#!{{key}}">{{value}}</a>
</li>

为什么这样能行？ #

在JS里，访问对象属性有两种方式：

• 点语法：ctrl.functionName1()，适合属性名是固定字符串的情况
• 方括号语法：ctrl[key]，这里的key是变量，会被解析成它的实际值，正好匹配你动态获取的函数名。加上()就可以直接调用这个函数了。

额外小提示 #

如果担心某些key对应的函数不存在（避免控制台报错），可以加个存在性判断：

<a ng-click="ctrl[key] && ctrl[key]()" ng-href="#!{{key}}">{{value}}</a>

这样只有当ctrl[key]确实是一个函数时，才会执行调用。

内容的提问来源于stack exchange，提问作者Shashi Ranjan