Question

我想基于变量动态调用函数，变量具有函数名称，例如

var fun =function1(1,2)

有时变量乐趣可以有功能

fun= function2(2,3)

它只是一个解释我的场景的例子

然后我想从我的html中调用它

HTML

<button ng-click="{{fun}}>call</button>

fun有时可以有function1和function2

Answer 1

因为函数是JavaScript中的一等公民，所以我们可以像传统的其他变量一样传递它们。

点击f1后，查看this JSFiddle替代f2和Change Handler的示例。

<强> HTML

<body ng-app="exampleApp" ng-controller="appCtrl">
    <div>
        <h3>{{name}}</h3>
        <br>
        <button type="button" class="btn btn-primary" ng-click="fun()">Show Name</button>
        <button type="button" class="btn btn-primary" ng-click="changeClick()">
          Change Handler
        </button>
        <br>
        <h3 ng-show="clicked">You did it {{name}}</h3>
    </div>
</body>

<强>的JavaScript

var app = angular.module('exampleApp', []);

app.controller('appCtrl', function($scope){

    function f1() {
        $scope.name = "Chris";
    }

    function f2() {
        $scope.name = "Harry";
    }

    $scope.fun = f1;

    $scope.changeClick = function() {
      if($scope.fun === f1) {
        $scope.fun = f2;
      } else {
        $scope.fun = f1;
      }
    };

    $scope.name = "Default";
});

在上面的示例中，changeClick会替换fun

的值

Answer 2

如果要访问变量，请不要使用{{}}。只需使用变量名称

function foo() {
    console.log("executing foo");
}

$scope.fun = foo;

<button ng-click="fun()">call</button>

将函数赋给变量angularjs

2 个答案: