Javascript AngularJS 将字符串作为函数传递给 ng-click 使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28540598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS pass string as function to use at ng-click
提问by KIC
I want to assign a javascript function to ng-click which name is sourced by a rest service.
我想为 ng-click 分配一个 javascript 函数，该函数的名称由休息服务提供。
<li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data">
<a href="{{menu.href}}" data-ng-click="{{menu.javascript}}">{{menu.label}}</a>
</li>
Sadly the angularjs parser throws an exception if one use {{ }} inside of ng-click. So I have tried several workarounds like using a callback function
遗憾的是，如果在 ng-click 中使用 {{ }}，angularjs 解析器会抛出异常。所以我尝试了几种解决方法，例如使用回调函数
<a href="{{menu.href}}" data-ng-click="call(menu.javascript)">{{menu.label}}</a>
But none of my ideas succeeded. How can I assign a javascript functions name in ng-lick? Btw. the function itself is part of the $scope.
但我的想法都没有成功。如何在 ng-lick 中分配 javascript 函数名称？顺便提一句。函数本身是 $scope 的一部分。
Edit- Here is the controller:
编辑 - 这是控制器：
The "$menu" service is simply a get rest request. The request result is a json object and only holding string values. In the current issue the result for menu.javascript is "loginModal()".
“$menu”服务只是一个获取休息请求。请求结果是一个 json 对象，只包含字符串值。在当前问题中，menu.javascript 的结果是“loginModal()”。
.controller('HeaderController', function($scope, $http, ModalService, $menu, $routeParams) {
$scope.loginModal = function() {
console.log("modal", ModalService);
// Just provide a template url, a controller and call 'showModal'.
ModalService.showModal({
templateUrl: "/modals/login.modal.html",
controller: "LoginController"
}).then(function(modal) {
// The modal object has the element built, if this is a bootstrap modal
// you can call 'modal' to show it, if it's a custom modal just show or hide
// it as you need to.
console.log(modal.element);
modal.element.modal();
modal.close.then(function(result) {
console.log(result ? "You said Yes" : "You said No");
});
});
};
$menu.get($routeParams, function(data){
$scope.menu = data;
});
})
Edit 2:
编辑2：
Interestingly when I use {{menu.javascript}} then the correct string "loginModal()" is available in the DOM. But the angular parser stopped there due to errors.
有趣的是，当我使用 {{menu.javascript}} 时，DOM 中会出现正确的字符串“loginModal()”。但是角度解析器由于错误而停在那里。
回答by Pankaj Parkar
You can do something like this
你可以做这样的事情
HTML
HTML
<div ng-controller="TodoCtrl">
<button ng-click="callFunction('testClick')">CLICK ME</button>
</div>
Controller
控制器
function TodoCtrl($scope) {
$scope.callFunction = function (name){
if(angular.isFunction($scope[name]))
$scope[name]();
}
$scope.testClick = function(){
alert("Called");
}
}
Hope this could help you. Thanks.
希望这可以帮助你。谢谢。
回答by Andrey108
You can use the hashmap notation accessing the property of 'this' object (which, in this case, is $scope):
您可以使用 hashmap 符号访问“this”对象的属性（在本例中为 $scope）：
<li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data">
<a href="{{menu.href}}" data-ng-click="this[menu.javascript]()">{{menu.label}}</a>
</li>
