AngularJS pass string as function to use at ng-click

Question

I want to assign a javascript function to ng-click which name is sourced by a rest service.

<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

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

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()".

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

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.

just use this without any bracket ng-click="yourFunctionOnScope()" — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Feb 16, 2015 at 11:42
yes data-ng-click="menu.javascript" compiles but does not call the script ... — KIC
– KIC, Commented Feb 16, 2015 at 11:44
What I believe is you have to use $compile service in order to use ng-click working. still I'm not sure about it. — micronyks
– micronyks, Commented Feb 16, 2015 at 11:48

Pankaj Parkar · Accepted Answer · 2015-10-28 18:34:52Z

29

You can do something like this

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");
    }
}

Working Fiddle

Hope this could help you. Thanks.

edited Oct 28, 2015 at 18:34

answered Feb 16, 2015 at 12:07

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

KIC Over a year ago

I have tried this one. Sadly It only works if use use fixed Strings. Which means "testClick" can not be a value of varibale.

Pankaj Parkar Over a year ago

@KIC in your case it would be data-ng-click="callFunction('{{menu.javascript}}')"

KIC Over a year ago

yes, data-ng-click="callFunction(menu.javascrpt)" works, I forgot to remove the () in my rest response. thx!

horatio.mars Over a year ago

if I need pass callFunction into this module as isolated scope

Pankaj Parkar Over a year ago

Isolated scope will only come into the picture when you have directive.. Not sure whats ypu question?

|

Andrey108 · Accepted Answer · 2017-03-27 04:52:30Z

0

You can use the hashmap notation accessing the property of 'this' object (which, in this case, is $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>

answered Mar 27, 2017 at 4:52

Andrey108

1

Collectives™ on Stack Overflow

AngularJS pass string as function to use at ng-click

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related