How can a callback be created in an Angular directive using a function name stored in the parent scope variable?

Question

How can a callback be created in an Angular directive using a function name stored in the parent scope variable?

Currently, I am experiencing an issue with a parent scope that has a function name defined within a variable.

$scope.form.callback = "sayHello(msg)";
$scope.sayHello = function(msg) {
    alert('Parent says ' + msg);
};

The parent template is structured like this:

<a sg-dir sg-callback="{{form.callback}}" href="">Click Me</a>

Below is the code for "sgDir":

someModule.directive("sgDir", function(){
    return {
        scope: {
            sgCallback: "&"
        },
        link: function(scope, elem, attrs, ctrl) {
            scope.sgCallback({msg:'Hello world!'});
        }
    };
});

However, this setup is resulting in an error message:

[$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the
expression [{{form.callback}}] starting at [{form.callback}}].

Please assist me with resolving this issue.

Update:

I need to keep the function name within a variable as per my requirements.

javascript angularjs

Answer 1

Answer №1

You made a syntax error, resulting in a parsing issue. To correct this, ensure that you pass the actual function sayHello on the isolated scope attribute instead of an interpolated function reference.

For example, use sg-callback="form.callback(msg)" where the parameter msg will be filled by the directive when calling the callback function (as seen here:

scope.sgCallback({msg:'Hello world!'})

).

<a sg-dir sg-callback="sayHello(msg)" href="">click Me</a>

Check out the demo here

Update

The preferred method to pass a callback function to a directive is using &. However, if you need to pass a dynamic string that will be evaluated within the directive, you can follow a workaround. Pass a string expression as an attribute value and change the sgCallback to sgCallback: "@" in the directive's isolated scope. Then, replace the string with the actual parameter value upon clicking the anchor element.

Note that the current implementation involves accessing the parent scope using scope.$parent to evaluate the function expression against the parent controller scope. If there is no isolated scope in the directive, you would use scope.$eval instead of scope.$parent.$eval.

sgDir

.directive("sgDir", function($timeout) {
  return {
    scope: {
      sgCallback: "@"
    },
    link: function(scope, elem, attrs, ctrl) {
      elem.on('click', function() {
        $timeout(function() {
          var callback = attrs.sgCallback.replace('(msg)', '(\''+ "Hello World" +'\')');
          scope.$parent.$eval(callback);
        });
      });
    }
  };
});

View the updated Plunkr

Answer 2

You made a syntax error, resulting in a parsing issue. To correct this, ensure that you pass the actual function sayHello on the isolated scope attribute instead of an interpolated function reference.

For example, use sg-callback="form.callback(msg)" where the parameter msg will be filled by the directive when calling the callback function (as seen here:

scope.sgCallback({msg:'Hello world!'})

).

<a sg-dir sg-callback="sayHello(msg)" href="">click Me</a>

Check out the demo here

Update

The preferred method to pass a callback function to a directive is using &. However, if you need to pass a dynamic string that will be evaluated within the directive, you can follow a workaround. Pass a string expression as an attribute value and change the sgCallback to sgCallback: "@" in the directive's isolated scope. Then, replace the string with the actual parameter value upon clicking the anchor element.

Note that the current implementation involves accessing the parent scope using scope.$parent to evaluate the function expression against the parent controller scope. If there is no isolated scope in the directive, you would use scope.$eval instead of scope.$parent.$eval.

sgDir

.directive("sgDir", function($timeout) {
  return {
    scope: {
      sgCallback: "@"
    },
    link: function(scope, elem, attrs, ctrl) {
      elem.on('click', function() {
        $timeout(function() {
          var callback = attrs.sgCallback.replace('(msg)', '(\''+ "Hello World" +'\')');
          scope.$parent.$eval(callback);
        });
      });
    }
  };
});

View the updated Plunkr

How can a callback be created in an Angular directive using a function name stored in the parent scope variable?

Answer №1

Similar questions

Change the way a button interacts with a different element

I am encountering a confusing issue where utilizing await does not actually wait for a Promise to resolve. Can you shed some light on why this unexpected behavior is happening?

React does not display newly updated states when they are modified

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

Retrieving the user's Windows username with JavaScript

Is there a way to improve this code without the need for the variable `a`?

Discover the best way to utilize Ember Data serializer in conjunction with JQuery AJAX requests

What could be causing the syntax error I'm encountering while trying to extract data from this JSON file?

What is the best method for passing parameters from HTML to AJAX within code?

What is the best way to enable a link upon clicking while simultaneously disabling the others using JavaScript?

Utilizing Angular.JS to implement a template featuring tags

Having trouble implementing CORS in a Slim API

Transforming JavaScript/Angular 1 from using Promise.all to async-await technique

What can you do with jQuery and an array or JSON data

If the background color is blue, then element class will be added

What methods can I use to adjust my HTML content once I have parsed my JSON file?

Submitting a form and using Ajax to upload an image

Defining the signature of an unnamed function in TypeScript

Tips for incorporating an HTML file using ng-include in double curly brace syntax {{ }}

activate the button once valid input has been provided