AngularJS中如何通过动态字符串调用函数及在ng-click中使用函数变量？

没问题，这个需求完全可行！咱们先来拆解你之前写法里的问题，再给出正确的实现方式。

先分析你之前三种写法的问题： #

1. 第一个按钮 ng-click="variable1"：你只是引用了函数对象，但没有触发调用——AngularJS不会自动执行函数，必须加上括号 () 才会触发函数执行。
2. 第二个按钮 ng-click="$scope[variable2]()"：在ng-click的表达式里不需要手动写$scope，AngularJS会自动在当前作用域下解析；而且variable2是字符串"showname()"，直接用[]取值的逻辑不对，得用作用域的$eval方法来执行字符串里的代码。
3. 第三个按钮 ng-click="variable2"：这里variable2是字符串而非函数引用，自然没法直接触发执行。

修正后的完整代码实现 #

JavaScript部分

var app = angular.module("app", []); 
app.controller("name", function($scope) { 
  $scope.showname = function() { 
    alert("Ramesh"); 
  };
  // 存储函数引用
  $scope.variable1 = $scope.showname; 
  // 存储函数调用的字符串
  $scope.variable2 = "showname()"; 
});

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="app" ng-controller="name"> 
  <!-- 正确写法1：调用函数引用 -->
  <button type="button" ng-click="variable1()" tabindex="10003" >Working 1 </button> 
  <!-- 正确写法2：用$eval执行字符串里的函数调用 -->
  <button type="button" ng-click="$eval(variable2)" tabindex="10003" >Working 2 </button> 
  <!-- 补充写法：从字符串中提取函数名后调用 -->
  <button type="button" ng-click="this[variable2.replace('()', '')]()" tabindex="10003" >Working 3 </button> 
  <!-- 原有的直接调用方式 -->
  <button type="button" ng-click="showname()" tabindex="10003"> Working </button> 
</div>

关键要点总结： #

• 如果变量存储的是函数引用（比如variable1）：直接在ng-click里写变量名()即可调用。
• 如果变量存储的是函数调用的字符串（比如variable2）：使用AngularJS作用域的$eval()方法，它会帮你解析并执行字符串中的表达式。
• 在ng-click的表达式中，不需要显式写$scope，AngularJS会自动绑定当前控制器的作用域。

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