如何在'ng-click'事件中动态调用angularjs函数?

时间:2017-03-28 07:43:03

标签: javascript angularjs

我想动态调用函数,因为函数名字符串将来自数据库。 即“myNameIsGopal”。

使用窗口“myNameIsGopal”,我可以调用控制器中没有的函数,但我想动态调用角度控制器内的函数。

现在,我在控制器外定义了以下功能,我可以使用窗口“myNameIsGopal”调用

function myNameIsGopal(args){
alert(args);}

但是我想从控制器内部调用这样的方法。

$scope.myNameIsGopal=function(args){
alert(args);
};

以下是我的html页面:

    

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <input type="text" ng-model="value" ng-enter="hideToolTip(event)" />

    <input type="button" ng-model="gobar" ng-click="dynamicCaller('myNameIsGopal','banana')" value="click me">`enter code here`
  </body>

</html>

以下是App.js代码:

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

function myNameIsGopal(arg){
    alert(arg);
  }
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';


 $scope.dynamicCaller=function(arg1,arg2){
   window[arg1](arg2);
  }

  $scope.myNameIsGopal=function(arg){
    alert(arg);
  }



  $scope.hideToolTip = function(event) {
    alert(event);
  }
});

1 个答案:

答案 0 :(得分:5)

你很接近,因为$scope对象中定义的函数不使用它window

$scope.dynamicCaller=function(arg1,arg2){
   $scope[arg1](arg2);
}

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.dynamicCaller = function(arg1, arg2) {
    $scope[arg1](arg2);
  }
  $scope.myNameIsGopal = function(arg) {
    console.log(arg);
  }
  $scope.hideToolTip = function(event) {
    console.log(event);
  }
});
<script src="https://code.angularjs.org/1.3.16/angular.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <input type="button" ng-click="dynamicCaller('hideToolTip', 'mango')" value="click hideToolTip"/>

  <input type="button" ng-click="dynamicCaller('myNameIsGopal','banana')" value="click myNameIsGopal">
</div>