Utilizing AngularJS: Establishing a Universal Parent State in UI-Router for Modals and Shared Components

Question

Utilizing AngularJS: Establishing a Universal Parent State in UI-Router for Modals and Shared Components

In my code using UI-Router and Bootstrap-ui modal, I have defined the state as shown below. reference

var state = {
    name: 'modala',
    parent: 'home',
    onEnter: function($modal, $state) {
        modalInstance = $modal.open({
            templateUrl: 'modala.html',
            controller: 'modalaCtrl',
            controllerAs: 'modal'
        });
        modalInstance.result['finaly'](function() {
            modalInstance = null;
            if ($state.$current.name === 'modala') {
                $state.go('^');
            }
        });
    },
    onExit: function() {
        if (modalInstance) {
            modalInstance.close();
        }
    }
};

I am looking for a way to use 'modala' outside of the 'home' state.

I don't want to repeatedly define 'modala'.

Is there a method to make this work without specifying the parent every time?

Suggested Solutions:

1. Do not specify the parent in the modal state.

Result: The modal window will not be displayed within its designated parent.

Example

2. Name the modal state as ${parent.name}.modal format.

Result: This approach works, but it requires defining multiple states for each modal window and adding a state for every new parent that calls the modal.

Example

3. Define the modal state separately for each parent.

Result: Similar to pattern 2.

Example

javascript angularjs angular-ui-router angular-ui-bootstrap

Answer 1

Answer №1

There is an updated plunker available for viewing (the second attempt from the original question)

In order to showcase a different use of decorators, as explained in detail in my previous post on Stack Overflow, we will create multiple states such as 'home', 'page1', 'page2' and introduce a common child state with modal functionality.

The goal is to implement the same modal features across all child states, each belonging to a different parent. We achieve this by defining empty child states for each existing parent like so:

.config(function($stateProvider) {
  $stateProvider.state('home.generalModal',  {});
  $stateProvider.state('page1.generalModal', {});
  $stateProvider.state('page2.generalModal', {});
})

To accomplish this, we utilize a decorator in the following manner:

.config(['$stateProvider', 
  function($stateProvider) {

    var endsWith = function(stringToBesearched, valueToBeFound) {
      return stringToBesearched.slice(-valueToBeFound.length) === valueToBeFound;
    }

    $stateProvider.decorator('data', function (state, dataBuilder) {
      var data = dataBuilder(state);

      var skipState = !endsWith(state.name, ".generalModal");

      if(skipState) { 
        return data;
      }

      var modalInstance;

      var onEnter = function($modal, $state) {
          console.log("Entering state: " + $state.current.name)
          modalInstance = $modal.open({
            templateUrl:'modal.html',
            controller: 'modalCtrl',
            controllerAs: 'modalCtrl'
          });
          modalInstance.result['finally'](function() {
            modalInstance = null;
            if(endsWith($state.$current.name, ".generalModal")) {
              $state.go('^');
            }
          });
        };

      var onExit = function($state) { 
          console.log("Exiting state: " + $state.current.name)
          if (modalInstance) {
            modalInstance.close();
          }
      };

      state.self.onEnter = onEnter;
      state.self.onExit = onExit;

      return data;

    });
}])

We have extended every child state whose name ends with ".generalModal" with both onEnter and onExit functions. This centralized approach simplifies the process.

To see it in action, you can check out the updated plunker here

Answer 2

There is an updated plunker available for viewing (the second attempt from the original question)

In order to showcase a different use of decorators, as explained in detail in my previous post on Stack Overflow, we will create multiple states such as 'home', 'page1', 'page2' and introduce a common child state with modal functionality.

The goal is to implement the same modal features across all child states, each belonging to a different parent. We achieve this by defining empty child states for each existing parent like so:

.config(function($stateProvider) {
  $stateProvider.state('home.generalModal',  {});
  $stateProvider.state('page1.generalModal', {});
  $stateProvider.state('page2.generalModal', {});
})

To accomplish this, we utilize a decorator in the following manner:

.config(['$stateProvider', 
  function($stateProvider) {

    var endsWith = function(stringToBesearched, valueToBeFound) {
      return stringToBesearched.slice(-valueToBeFound.length) === valueToBeFound;
    }

    $stateProvider.decorator('data', function (state, dataBuilder) {
      var data = dataBuilder(state);

      var skipState = !endsWith(state.name, ".generalModal");

      if(skipState) { 
        return data;
      }

      var modalInstance;

      var onEnter = function($modal, $state) {
          console.log("Entering state: " + $state.current.name)
          modalInstance = $modal.open({
            templateUrl:'modal.html',
            controller: 'modalCtrl',
            controllerAs: 'modalCtrl'
          });
          modalInstance.result['finally'](function() {
            modalInstance = null;
            if(endsWith($state.$current.name, ".generalModal")) {
              $state.go('^');
            }
          });
        };

      var onExit = function($state) { 
          console.log("Exiting state: " + $state.current.name)
          if (modalInstance) {
            modalInstance.close();
          }
      };

      state.self.onEnter = onEnter;
      state.self.onExit = onExit;

      return data;

    });
}])

We have extended every child state whose name ends with ".generalModal" with both onEnter and onExit functions. This centralized approach simplifies the process.

To see it in action, you can check out the updated plunker here

Answer 3

Answer №2

To designate a parent state for your defined child states, simply include the parent: modala property in each one.

Answer 4

To designate a parent state for your defined child states, simply include the parent: modala property in each one.

Answer 5

Answer №3

In the UI-Router, there exists a solution known as the state decorator

decorator(name, func)

This feature allows us to create an aspect that can be injected into any desired state. This aspect has the ability to control common global settings such as parent or views...

For further reference, see this example here: How to decorate current state resolve function in UI-Router? Current function isn't invoked, with a small quote:

By extending (carefully) or overriding (at your own risk) the internal stateBuilder object used by $stateProvider, you can add custom functionality to ui-router, for instance deducing templateUrl based on the state name...

There is a functioning example tailored to our situation

To implement the decorator, we need to define it like so:

.config(['$stateProvider', 
  function($stateProvider) {

    $stateProvider.decorator('parent', function (state, parent) {
      // original parent created through configuration
      var result = parent(state);

      // specify states where default behavior should not be altered
      var skipState = state.name === "home" 
                   || state.name === "modala"
                      // child already inherits from parent
                   || state.name.indexOf(".") > 0 ;

      // return default if specified
      if(skipState) 
      { 
        return result;
      }

      // FINALLY - HERE
      //   modify existing parent or introduce new one 
      state.parent = 'modala'; 

      // rebuild and return modified parent
      result = parent(state);

      // new parent set successfully
      return result;

    });
}])

See this demo in action here

Answer 6

In the UI-Router, there exists a solution known as the state decorator

decorator(name, func)

This feature allows us to create an aspect that can be injected into any desired state. This aspect has the ability to control common global settings such as parent or views...

For further reference, see this example here: How to decorate current state resolve function in UI-Router? Current function isn't invoked, with a small quote:

By extending (carefully) or overriding (at your own risk) the internal stateBuilder object used by $stateProvider, you can add custom functionality to ui-router, for instance deducing templateUrl based on the state name...

There is a functioning example tailored to our situation

To implement the decorator, we need to define it like so:

.config(['$stateProvider', 
  function($stateProvider) {

    $stateProvider.decorator('parent', function (state, parent) {
      // original parent created through configuration
      var result = parent(state);

      // specify states where default behavior should not be altered
      var skipState = state.name === "home" 
                   || state.name === "modala"
                      // child already inherits from parent
                   || state.name.indexOf(".") > 0 ;

      // return default if specified
      if(skipState) 
      { 
        return result;
      }

      // FINALLY - HERE
      //   modify existing parent or introduce new one 
      state.parent = 'modala'; 

      // rebuild and return modified parent
      result = parent(state);

      // new parent set successfully
      return result;

    });
}])

See this demo in action here

Answer 7

Answer №4

I was also eager to find the answer to this question. After some effort, I managed to figure it out.

You can check out my solution on my Stack Overflow thread

Answer 8

I was also eager to find the answer to this question. After some effort, I managed to figure it out.

You can check out my solution on my Stack Overflow thread

Utilizing AngularJS: Establishing a Universal Parent State in UI-Router for Modals and Shared Components

Answer №1

Answer №2

Answer №3

decorator(name, func)

Answer №4

Similar questions

Issues with Await and Async functionality in Angular and Ionic 4 causing unexpected behavior

Troubleshooting a problem with $addToSet and $each in Mongo and Node.js

What is the best way to choose the nearest element using the initial part of a class name?

Memory usage of a Jhipster application running on an Amazon EC2 instance

Steps to enable editing in an array

Is there a way to add a new button each time a different model is inserted by someone?

Error: Uncaught object in AngularJS ngRoute

Enable direct download from external servers

Javascript - Error encountered when utilizing a for loop to insert a new column into an array

The C# counterpart to the JavaScript "OR assignment" concept

Unregistering an event with AngularJS

Optimizing normals for unindexed BufferGeometry in Three.js

Utilize Content Delivery Network Components in Conjunction with a Command Line Interface Build

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

Creating a square shape in Twitter Bootstrap to frame an item on a webpage

JavaScript and HTML are commonly used programming languages for developing

Traverse JSON object as a string

Tips for extracting the index of the chosen item from a dropdown using ReactJs and Material UI

How can I make the arrows work on a secondary slider with EasySlider1.7?

Ways to navigate to a new webpage in JavaScript without the need to click on a link