How to invoke a function as dynamically string in AngularJS?

Question

How to use a function assigned variable in ng-click?? I have tried three ways below, but that's also not working.

Could you please let me know is it possible or not??? if yes, then how?

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>

@AlekseySolovey It is a function variable only. I am just tried with a string variable as well. — Ramesh Rajendran, May 09 '18 at 10:37

Mihai Alexandru-Ionut · Accepted Answer · 2018-05-09T10:51:55.237

0

You can use $scope.$eval method and invoke the function like variable2().

$eval method don't evaluate JavaScript; they evaluate just AngularJS expressions.

Also, for the below line

$scope.variable1 = $scope.showname;

You are just keeping a reference to your showname function. You have to invoke it

<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>

edited May 09 '18 at 10:51

answered May 09 '18 at 10:38

Mihai Alexandru-Ionut

47,092
13
101
128

Perfect :) ..is it possible to do this without `eval()`?? – Ramesh Rajendran May 09 '18 at 10:39
2

using eval is really a bad practice – Sajeetharan May 09 '18 at 10:49
@RameshRajendran, I updated my answer with a better method. – Mihai Alexandru-Ionut May 09 '18 at 10:52
@Sajeetharan, I know but in javascript are a lot of workarounds such as `apply` method or others . I updated my answer using `$scope.$eval` method. – Mihai Alexandru-Ionut May 09 '18 at 10:52
What's the difference between them? – Ramesh Rajendran May 09 '18 at 10:56
@RameshRajendran, have a look here : https://stackoverflow.com/questions/15671471/angular-js-how-does-eval-work-and-why-is-it-different-from-vanilla-eval – Mihai Alexandru-Ionut May 09 '18 at 10:57
1

@RameshRajendran it evaluates AngularJS expressions, so it knows that `showname` belongs to `$scope` – Aleksey Solovey May 09 '18 at 10:59

score 0 · Answer 2 · answered May 09 '18 at 10:38

0

Try:

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

Working plunkr

answered May 09 '18 at 10:38

Shashank Vivek

16,888
8
62
104

score 0 · Answer 3 · answered May 09 '18 at 10:39

$scope.showname has function reference. So just assign it to your variable like

$scope.variable1 = $scope.showname

And then call in ng-click like valiable1()

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>

score 0 · Answer 4 · answered May 09 '18 at 17:58

Instead of using $scope, use the this keyword:

Erroneous

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

Instead use:

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

It is possible to access the context object using the identifier this.

For more information, see AngularJS Developer Guide - Expression context.

How to invoke a function as dynamically string in AngularJS?

4 Answers4