AngularJS dynamically call function

Question

at this point, I'm new to AngularJS.

This works:

scope.$apply(scope.hideTooltip());

But calling the function dynamically does not work:

scope.$apply(
  scope.$eval(attrs.ngEnter, {'event': event})
);

HTML:

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

The enitre directive:

   app.directive('ngEnter', function() {
            return function(scope, element, attrs) {
                console.log(scope.hideTooltip());
                element.bind("keydown keypress", function(event) {
                    if(event.which === 13) {
                        console.log(attrs.ngEnter);
                        scope.$apply(
                            scope.$eval(attrs.ngEnter, {'event': event})
                        );
                        event.preventDefault();
                    }
                });
            };
        });

So, how do I call a function dynamically in an AngularJS directive?

I think what you want to do can be done with isolate scope: egghead.io/lessons/angularjs-isolate-scope-expression-binding — Joao Leal
– Joao Leal, Commented Jun 22, 2015 at 11:31
you can use ng-model-options if you are using angular 1.3 here is the link docs.angularjs.org/api/ng/directive/ngModelOptions — Arpit Srivastava
– Arpit Srivastava, Commented Jun 22, 2015 at 11:35

Kalhan · Accepted Answer · 2015-06-22 11:41:15Z

2

seems like you have missed the argument for the controller method in the HTML

// you have missed the event parameter.

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

app.directive('ngEnter', function() {
    return function(scope, element, attrs) {

      element.bind("keydown keypress", function(event) {
        if (event.which === 13) {

          console.log(attrs.ngEnter);
          scope.$apply(
            scope.$eval(attrs.ngEnter, {
              'event': event
            })
          );
          event.preventDefault();
        }
      });
    };
  });

in controller

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

here is the DEMO

P.S. this will call the controller function twice after hitting ENTER since your binding both keydown and keypressevents.

AND Don't forget to remove the console.log(scope.hideTooltip()); line.

edited Jun 22, 2015 at 11:41

answered Jun 22, 2015 at 11:36

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

2 Comments

Floris Over a year ago

That's it. Thanks! Yes, I was passing the event parameter but the controller function didn't have any parameters. Strange that it didn't trigger a method undefined exception.

Kalhan Over a year ago

:) glad to help you and additionally if you want to call the console.log(scope.hideTooltip()); the way you have to use here is console.log(scope.hideToolTip);, cheerz :)

Collectives™ on Stack Overflow

AngularJS dynamically call function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related