What is the best way to invoke a parent's scope function with a combination of arguments?

Question

What is the best way to invoke a parent's scope function with a combination of arguments?

In my current scenario, I am faced with a challenge involving a directive that has an isolated scope. My goal is to invoke a function from the parent's scope with a combination of arguments. By "mixed" arguments, I mean one argument originates from the directive while the other comes from the parent.

For the arguments provided by the directive, I could bind the function using `<` and utilize it accordingly. On the other hand, for arguments supplied by the parent's scope, I could bind the entire function call using `&`.

I am contemplating two possible approaches- firstly, to simulate currying by calling the function with the parent’s arguments, resulting in a function that accepts the directive's arguments. Secondly, finding a way to introduce directive variables into the parent's scope so that I can write:

<my-directive on-alarm="emergency(parent_var,dir_var)"/>

The latter option seems more appealing to me. However, I am uncertain about how to accomplish this task - specifically, how to introduce directive variables into the parent's scope without resorting to manual reverse binding methods such as:

<my-directive for_sake_of_calling="dir_var" on-alarm="emergency(parent_var,dir_var)"/>

Although these are just assumptions on my part, the crux of the matter remains: How can I call the parent's function with mixed arguments?

javascript angularjs angularjs-directive isolate-scope

Answer 1

Answer №1

To accomplish this task, follow these steps:

Firstly, set up the main application's HTML structure,

<body ng-app="app">
    <div ng-controller="MainCtrl as vm">
        Emergency text: {{vm.emergencyText}}
        <my-directive on-alarm="vm.emergency(vm.parentVar, directiveVar)"></my-directive>
    </div>
</body>

Notice that the on-alarm callback references the vm.parentVar variable, which points to MainCtrl.parentVar, and directiveVar obtained from the directive.

Next, we will define our main controller:

angular.module('app', []);

angular
  .module('app')
  .controller('MainCtrl', function () {
    // Initialize the emergency text used in the view.
    this.emergencyText = '';
    // Define the parent var, a parameter passed to the emergency function.
    this.parentVar = 'This is an emergency';

    // Define the emergency function, taking the parent 
    // and directive text from the view call 
    // vm.emergency(vm.parentVar, directiveVar).
    this.emergency = function (parentText, directiveText) {
      this.emergencyText = parentText + ' ' + directiveText;
    }.bind(this);
  });

Lastly, we will create the directive.

angular
  .module('app')
  .directive('myDirective', function () {
    return {
      scope: {
        onAlarm: '&'
      },
      link: function (scope, element, attrs) {
        scope.onAlarm({ directiveVar: 'from myDirective' });
      }
    }
  });

The important part comes after calling

scope.onAlarm({ directiveVar: 'from myDirective' });

. This informs Angular that the alarm callback function (emergency) can access directiveVar, referenced in the view using

on-alarm="vm.emergency(vm.parentVar, directiveVar)"

. Internally, Angular resolves the parentVar scope to MainCtrl and the directiveVar scope to the directive via its $parse service.

Here is a complete Plunkr demo.

Answer 2

To accomplish this task, follow these steps:

Firstly, set up the main application's HTML structure,

<body ng-app="app">
    <div ng-controller="MainCtrl as vm">
        Emergency text: {{vm.emergencyText}}
        <my-directive on-alarm="vm.emergency(vm.parentVar, directiveVar)"></my-directive>
    </div>
</body>

Notice that the on-alarm callback references the vm.parentVar variable, which points to MainCtrl.parentVar, and directiveVar obtained from the directive.

Next, we will define our main controller:

angular.module('app', []);

angular
  .module('app')
  .controller('MainCtrl', function () {
    // Initialize the emergency text used in the view.
    this.emergencyText = '';
    // Define the parent var, a parameter passed to the emergency function.
    this.parentVar = 'This is an emergency';

    // Define the emergency function, taking the parent 
    // and directive text from the view call 
    // vm.emergency(vm.parentVar, directiveVar).
    this.emergency = function (parentText, directiveText) {
      this.emergencyText = parentText + ' ' + directiveText;
    }.bind(this);
  });

Lastly, we will create the directive.

angular
  .module('app')
  .directive('myDirective', function () {
    return {
      scope: {
        onAlarm: '&'
      },
      link: function (scope, element, attrs) {
        scope.onAlarm({ directiveVar: 'from myDirective' });
      }
    }
  });

The important part comes after calling

scope.onAlarm({ directiveVar: 'from myDirective' });

. This informs Angular that the alarm callback function (emergency) can access directiveVar, referenced in the view using

on-alarm="vm.emergency(vm.parentVar, directiveVar)"

. Internally, Angular resolves the parentVar scope to MainCtrl and the directiveVar scope to the directive via its $parse service.

Here is a complete Plunkr demo.

What is the best way to invoke a parent's scope function with a combination of arguments?

Answer №1

Similar questions

Guide on generating a 2D array with a single array in AngularJS

Removing the year data and converting the month in JavaScript

"Creating a custom comparator in Angular for sorting objects based on their keys

The node-static tool is limited in its ability to serve folders that are located outside

What are the advantages of generating an HTML string on the server side and adding it to the client side?

I am facing difficulty in retrieving a unique dynamic div id using the useRef ReactJS hook, as it keeps returning the same id repeatedly

How can you locate the position of a selector within a parent or set using jQuery

What is the Content Security Policy error related to XHR-based applications in Firefox OS's Index.html file?

Tips for removing identical items from MongoDB

Can you please provide information on the callback function type used in the filter method of TypeScript?

Styling the button in jQuery to switch between disabled and enabled

What is the most efficient way to substitute text within an HTML document?

Display value of select box remains unchanged even after making an AJAX request

Tips for loading Google fonts quickly using Font Face Observer

What are the signs that an element was visible on screen prior to navigation?

Can JSON files be used to store arrays with multiple dimensions?

Any idea how to dynamically insert rows and columns into a table or div element?

Is there a way to prevent the background color from filling the entire container?

This TypeScript error occurs when trying to assign a value of type 'null' to a parameter that expects a type of 'Error | PromiseLike<Error | undefined> | undefined'

Displaying a list of entities in a dropdown menu upon loading an HTML page through a web API