如何在 AngularJS 中调用函数作为动态字符串？

Question

如何在ng-click?中使用function assigned variable？我已经尝试了下面的三种方法，但这也不起作用。

你能告诉我这可能吗？？？如果是，那怎么办？

var app = angular.module("app", []);
app.controller("name", function($scope) {

 $scope.showname = function()
 {
 alert("Ramesh");
 }
 
 $scope.variable1 = $scope.showname;
  
 $scope.variable2 = "showname()";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<button type="button" ng-click="variable1" tabindex="10003" >Not working 1 </button>

<button type="button" ng-click="$scope[variable2]()" tabindex="10003" >Not working 2 </button>

<button type="button"  ng-click="variable2" tabindex="10003" >Not working 3 </button>

<button type="button" ng-click="showname()" tabindex="10003"> working </button>
</div>

Answer 1

您可以使用 $scope.$eval 方法并调用函数 variable2()。

$eval 方法不计算 JavaScript；他们只计算 AngularJS 个表达式。

此外，对于下一行

$scope.variable1 = $scope.showname;

您只是在保留对 showname 函数的引用。你必须调用它

<button type="button" ng-click="variable1()" tabindex="10003" >Not working 1 </button>

var app = angular.module("app", []);
app.controller("name", function($scope) {

 $scope.showname = function()
 {
 alert("Ramesh");
 }
 
  $scope.variable1 = $scope.showname;
  
  $scope.variable2 = $scope.$eval("showname");
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<button type="button" ng-click="variable1()" tabindex="10003" >Not working 1 </button>

<button type="button" ng-click="variable2()" tabindex="10003" >Not working 2 </button>

<button type="button"  ng-click="variable2()" tabindex="10003" >Not working 3 </button>

<button type="button" ng-click="showname()" tabindex="10003"> working </button>
</div>

Answer 2

尝试：

<button type="button" ng-click="variable1()" tabindex="10003" >Now it'll work 1 </button>

Working plunkr

Answer 3

$scope.showname 有函数引用。所以只需将它分配给您的变量，例如

$scope.variable1 = $scope.showname

然后像 valiable1()

一样调用 ng-click

var app = angular.module("app", []);
app.controller("name", function($scope) {

 $scope.showname = function()
 {
 alert("Ramesh");
 }
 
  $scope.variable1 = $scope.showname;
  
  $scope.variable2 =  $scope.showname;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<button type="button" ng-click="variable1()" tabindex="10003" >Not working 1 </button>

<button type="button" ng-click="variable2()" tabindex="10003" >Not working 2 </button>

<button type="button"  ng-click="variable1()" tabindex="10003" >Not working 3 </button>

<button type="button" ng-click="showname()" tabindex="10003"> working </button>
</div>

Answer 4

不使用 $scope，而是使用 this 关键字：

Erroneous

<button type="button" ng-click="$scope[variable2]()" tabindex="10003" >
     Not working 2 
</button>

改为使用：

<button type="button" ng-click="this[variable2]()" tabindex="10003" >
     working
</button>

可以使用标识符 this 访问上下文对象。

有关详细信息，请参阅 AngularJS Developer Guide - Expression context。

如何在 AngularJS 中调用函数作为动态字符串？

How to invoke a function as dynamically string in AngularJS?

javascript

html

angularjs

scope

angularjs-ng-click