AngularJS中ng-repeat内动态绑定ng-click函数失效问题求助

我来帮你解决这个AngularJS里ng-repeat动态绑定函数的问题！

你遇到的核心问题在于ng-click指令的使用逻辑错误：你用了插值表达式{{x.function}}来绑定点击事件，但ng-click本身就接受Angular可执行表达式，不需要额外的插值包裹；同时你把函数写成字符串'add()'的形式，会让Angular无法正确识别为可执行的函数引用，反而将其当作普通字符串处理，最终导致报错。

正确的解决方案 #

直接在options数组里存储函数的引用（而非字符串形式的函数调用），然后在ng-click里直接调用这个函数引用即可。

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Click the button to run a function:</p>
<button ng-repeat="x in options" ng-click="x.function()">{{x.text}}</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
  $scope.count = 0;
  
  // 存储函数引用，而非字符串
  $scope.options = [
    { function: $scope.add, text: 'Add'},
    { function: $scope.subtract, text: 'Subtract'}
  ];
  
  $scope.add = function() {
    $scope.count++;
  };
  
  $scope.subtract = function() {
    $scope.count--;
  };
}]);
</script>
</body>
</html>

关键修改说明 #

• 函数存储方式：把options里的function值从字符串'add()'/'subtract()'改成直接引用$scope.add和$scope.subtract（注意不要加括号，加括号会立即执行函数）
• ng-click绑定：写法改成ng-click="x.function()"，点击按钮时会直接调用对应的函数引用

这种方案同样适用于需要传递参数的场景，只需要在ng-click里传入参数即可（比如ng-click="x.function(myParam)"），完全可以在其他动态函数绑定的场景中复用，也更符合AngularJS的绑定逻辑，避免了字符串解析带来的潜在问题。

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