AngularJS中如何将函数赋值给变量并实现动态调用？

你当前的写法 <button ng-click="{{fun}}">call</button> 是行不通的，因为AngularJS的ng-click指令接收的是可执行表达式，而非插值后的字符串。直接插值会导致语法错误，也不符合Angular的设计思路。下面给你两种实用的实现方案：

方案一：让fun存储带参数的函数引用 #

把fun定义成一个封装好的函数，内部直接调用目标函数并传入指定参数。切换fun的指向时，ng-click只需绑定fun()即可。

控制器代码示例： #

angular.module('myApp', [])
.controller('MyController', function($scope) {
  // 定义你的目标业务函数
  $scope.function1 = function(a, b) {
    console.log('执行function1，参数：', a, b);
    // 这里写具体业务逻辑
  };

  $scope.function2 = function(a, b) {
    console.log('执行function2，参数：', a, b);
    // 这里写具体业务逻辑
  };

  // 初始化fun为调用function1的函数
  $scope.fun = function() {
    $scope.function1(1, 2);
  };

  // 切换到function2的触发方法（比如绑定到另一个按钮）
  $scope.switchToFunc2 = function() {
    $scope.fun = function() {
      $scope.function2(2, 3);
    };
  };
});

HTML代码： #

<div ng-app="myApp" ng-controller="MyController">
  <button ng-click="fun()">调用当前函数</button>
  <button ng-click="switchToFunc2()">切换到function2</button>
</div>

方案二：存储函数名+参数，动态调用 #

如果更倾向于存储函数名称和对应参数，可以把fun做成包含这两个信息的对象，再通过$scope[fun.name].apply()来动态执行。

控制器代码示例： #

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.function1 = function(a, b) {
    console.log('执行function1，参数：', a, b);
  };

  $scope.function2 = function(a, b) {
    console.log('执行function2，参数：', a, b);
  };

  // 初始化fun对象：存储函数名和参数数组
  $scope.fun = {
    name: 'function1',
    args: [1, 2]
  };

  // 切换函数的方法
  $scope.switchFunction = function() {
    $scope.fun = {
      name: 'function2',
      args: [2, 3]
    };
  };
});

HTML代码： #

<div ng-app="myApp" ng-controller="MyController">
  <button ng-click="$scope[fun.name].apply(null, fun.args)">调用当前函数</button>
  <button ng-click="switchFunction()">切换到function2</button>
</div>

原写法失效的原因 #

当你写ng-click="{{fun}}"时，Angular会先插值得到字符串（比如"function1(1,2)"），但ng-click需要的是可直接执行的表达式，而非字符串。这种写法会被解析成无效语法，导致点击按钮无响应甚至报错。

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