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

时间:2015-02-16 11:39:16

标签: javascript html angularjs angularjs-scope angularjs-ng-click

我想指定一个javascript函数来ng-click哪个名字来自休息服务。

<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}}时,DOM中可以使用正确的字符串“loginModal()”。但由于错误,角度解析器停在那里。

2 个答案:

答案 0 :(得分:28)

你可以做这样的事情

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

希望这可以帮到你。感谢。

答案 1 :(得分:0)

你可以使用hashmap表示法来访问&#39;这个&#39;对象(在本例中为$ 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>