AngularJS 将字符串作为函数传递给 ng-click

Posted 2023-03-05

【中文标题】AngularJS 将字符串作为函数传递给 ng-click

【英文标题】：AngularJS pass string as function to use at ng-click

【发布时间】：2015-04-16 21:57:38

【问题描述】：

我想为 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>

遗憾的是，如果在 ng-click 中使用 ，则 angularjs 解析器会引发异常。所以我尝试了几种解决方法，比如使用回调函数

  <a href="menu.href" data-ng-click="call(menu.javascript)">menu.label</a>

但我的想法都没有成功。如何在 ng-lick 中分配 javascript 函数名称？顺便提一句。函数本身是 $scope 的一部分。

编辑- 这是控制器：

“$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;
    );
)

编辑 2：

有趣的是，当我使用 menu.javascript 时，正确的字符串“loginModal()”在 DOM 中可用。但是由于错误，角度解析器停在那里。

【问题讨论】：

使用简单的data-ng-click="menu.javascript"

只使用这个没有任何括号 ng-click="yourFunctionOnScope()"

yes data-ng-click="menu.javascript" 编译但不调用脚本...

我相信你必须使用 $compile 服务才能使用 ng-click 工作。我仍然不确定。

你能提供更多关于menu.javascript函数的信息吗？

【参考方案1】：

你可以这样做

HTML

  <div ng-controller="TodoCtrl">
      <button ng-click="callFunction('testClick')">CLICK ME</button>
  </div>

控制器

function TodoCtrl($scope) 

    $scope.callFunction = function (name)
        if(angular.isFunction($scope[name]))
           $scope[name]();
    

    $scope.testClick = function()
        alert("Called");
    

Working Fiddle

希望这可以帮助你。谢谢。

【讨论】：

这个我试过了。可悲的是，它仅在使用固定字符串时才有效。这意味着“testClick”不能是变量的值。

@KIC 在你的情况下是data-ng-click="callFunction('menu.javascript')"

是的，data-ng-click="callFunction(menu.javascrpt)" 有效，我忘记在我的休息响应中删除 ()。谢谢！

如果我需要将 callFunction 作为隔离范围传递到此模块

只有当你有指令时，孤立的范围才会出现。不确定你的问题是什么？

【参考方案2】：

您可以使用 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>