Is there a problem with AngularJS $state.go() not emitting $stateChangeSuccess?

In my scenario, I have controllers A and B located in different states.

When I trigger $state.go('state_b');, Angular switches to state state_b and loads controller B. However, what surprises me is that I do not receive $stateChangeSuccess in my B controller.

Why is it that my B controller is not receiving the $stateChangeSuccess event triggered by $state.go from controller A?

Is there an alternative method for the B controller to detect when it is being displayed? (It doesn't matter which previous state was active, just that the state/controller B is active once again)

Below are the state definitions:

.state("state_b", {
  url: "b/?:id",
  templateUrl:"/template/cms/shared/tabs/genericView.html.twig",
  reloadOnSearch: false,
  moduleName: "Module B",
  componentName: "Component B",
  parent: "application"
})
.state("state_a", {
  url: "a/",
  templateUrl: "/template/bundlename/a/index.html.twig",
  moduleName: "Module A",
  componentName: "Component A",
  parent: "application",
  controller: "OohAController as a",
  resolve: {
    b: function(OohBService, OohActiveBService) {
      var bId = OohActiveBService.getActiveB();
      return OohAService.get({id: bId}).$promise;
    }
  }
})

Answer №1

It seems like the concept is running smoothly. You can view an operational example here.

The events mentioned will trigger as follows:

.run(['$rootScope', '$state', function($rootScope, $state) {
    $rootScope.$on('$stateChangeSuccess', function(evt, to, params, from) {
      console.log("from : " + from.name + ", to:" + to.name);
    });
}])

These transitions will activate the mentioned events:

<a ui-sref="state_b({id:1})">
<a ui-sref="state_b({id:22})">
<a ui-sref="state_a">

The primary adjustment made was in the URL structure, as seen below:

  .state("state_b", {
      url: "/b/?:id",
      templateUrl: 'tpl.html',
  })
  .state("state_a", {
      url: "/a/",
      templateUrl: 'tpl.html',
      controller: 'OohAController as a',
  })

To see it in action, visit this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Nuxt.js context within a Vue plugin

I have a situation where I'm working with Nuxt.js and have two plugins set up. In order to gain access to the VueI18n instance from lang.js within validate.js, I am in need of some guidance. Is there anyone familiar with how this can be accomplished? ...

Ensure that at least one checkbox is selected by using custom validation in jQuery

My form has checkboxes for gender (male and female) and a set of checkboxes for days of the week (Monday to Sunday). I need to set validation rules so that at least one gender and one day is selected. Below is my jQuery code: $(document).ready(function( ...

Acquire the S3 URL link for the uploaded file upon completion of the file upload process

Is there a way to securely upload and generate a public Amazon S3 URL for a PDF file when a user clicks on a specific link? I'd like to avoid exposing the actual link to the user by uploading it to S3. Here's a sample code snippet: module.expo ...

Choose a numeric value and then adjust it to display with exactly two decimal places

My goal is to create a code that achieves the following tasks: Add an ID to every nth child Round the number in each nth child to 2 decimal places Prefix the numbers with a pound sign (£) Loop through until all the nth children in a table are processed ...

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

Applying multiple select filters in AngularJS to refine a scope

Check out my fiddle example here: http://jsfiddle.net/mwrLc/12/ <div ng-controller="MyCtrl"> <select ng-model="searchCountries" ng-options="cc.country for cc in countriesList | orderBy:'country'"> <option value="">Country ...

The 'substr' property is not found in the type 'string | string[]'

Recently, I had a JavaScript code that was working fine. Now, I'm in the process of converting it to TypeScript. var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress; if (ip.substr(0, 7) == "::ffff ...

Performing AJAX requests within AJAX requests without specifying a callback function for success

Upon reviewing this discussion jQuery Ajax Request inside Ajax Request Hello everyone, I'm in need of some clarification on a particular scenario. I recently took over the code from a former member of my development team and noticed that they have ma ...

Explore the full range of events available on the Angular UI-Calendar, the innovative directive designed for Arshaw FullCalendar

Utilizing external events with Angular ui-calendar: HTML: <div id='external-events'> <ul> <li class='fc-event'>Event 1</li> <li class='fc-event'>Event 2< ...

Modify the input field in the datepicker to resemble a button

How can I transform an input field into a button that looks like this rather than this ? The simple switch of tag names doesn't seem to work. Any suggestions on how to achieve this? class MyComponent extends React.Component { componentDidMount() ...

Is there a way to incorporate an 'input' type within an Icon Button component from Material UI in a React project?

Kindly review my code below. I have revamped it for clarity so you won't need to stress about important details! const test = () => { return ( <label > <input type='file' multiple style={{ display: &ap ...

Waiting for all API queries in VueJS is important to ensure that all data has been

Hey there, I currently have an API set up using Django Rest Framework and the front end is built with VueJS. I have a form view that can either be used to Add New or Modify existing data. The structure of the form remains the same, but it checks if an ID ...

Guide to displaying API data in HTML format

This university assignment involves working on a homework project where I need to utilize a public API in HTML. So far, I have successfully called the public API to display a list of radio channels in the left menu (without adding any click functionality). ...

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

Is it more effective to import an entire library or specific component when incorporating it into Create-React-App?

I have a question about optimizing performance. I understand that every library has its own export method, but for instance, on react-bootstrap's official documentation, it suggests: It is recommended to import individual components like: react-boo ...

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

Bug in toFixed causing incorrect results

function calculateTaxAndTotalRent(rent) { var phoneCharges = parseFloat($('#phone_charges').val()); phoneCharges = phoneCharges.toFixed(2); rent = parseFloat(rent); rent = rent.toFixed(2); var tax = parseFloat((rent * 15) / 1 ...

Dealing with a Promise and converting it into an array: a step-by-step

I am encountering difficulties progressing with my Promise returned from the getPostedPlaces() function. After executing getAll(), an Array is displayed as shown below. Although the array appears to be correct, I am unsure how to make the getAll() function ...

Communicating data transfer between two Node.js servers through the use of the Node Serial Port technology

How can I send the message "Hello world" from one nodejs server to another using node-serialport? I have confirmed that the radios connecting the two servers are properly connected as they are displaying buffer information after running my current code. ...

How to retrieve the value of input in a Formik form when the onChange event occurs

Currently, I am working on creating a form using React JS and the Formik library. One issue I encountered was related to validation, specifically the need to replace invalid letters with an empty string. str.replace(/\D/, ''); The challenge ...