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

Tips on deleting CSS comments from a CSS file

Currently, I am utilizing nextjs + reactjs. My objective is to eliminate all CSS comments from my existing css file. Despite using next-purgecss in order to get rid of unnecessary CSS code, the comments are still persisting. What could be the reason behind ...

tag-swapping function

I have a specific HTML code paragraph that I am working with: <p id=tag1> html statements before click </p> My goal is to create a function that will split the paragraph into two separate paragraphs like so : <p id=tag1> html statement ...

The element 'Component' cannot be utilized as a JSX component since its type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element

I'm currently facing an issue while running "yarn build" and/or "npm run build" on a repository. The error persists for both commands. My goal is to build and deploy this code to an AWS environment, but I am stuck at resolving the errors that indicate ...

Issue with Translate3d functionality in fullpage.js not functioning as expected

Currently, I am in the process of constructing a website using fullpage.js with WordPress. Everything is functioning well except for one issue - when attempting to disable the plugin by using destroy() or changing setAutoScrolling to false, the translate3d ...

Step-by-step guide to adding products to your Supabase shopping cart

I have managed to insert a row into the "order" table with user information. Now, I want to individually add item details to a separate table named "order_storeItems" to create a relationship between the order and storeItems tables. I attempted using Pro ...

Utilizing the dollar shorthand for jQuery in conjunction with Selenium

While utilizing the Selenium addon along with jQuery in my project, I encountered an issue where the use of jQuery functions containing $ in Selenium would trigger a "function not found" error. The problem was resolved by removing jQuery, but using jQuer ...

Problems with Angular UI Router: Functions not functioning properly within the template

Currently, I am delving into the realm of Angular UI Router in order to effectively manage different sections of my application. If you'd like, check out this plunkr (http://plnkr.co/edit/KH7lgNOG7iCAEDS2D3C1?p=preview) Here are some issues that I&a ...

Can two controllers be used for the main-app and sub-app with the same URL using angular ui-route?

I have implemented two controllers, 'BaseController' and 'SubController', for my main application and sub-application. Both controllers are configured to point to an empty URL. Below is the configuration for the main application:- ang ...

Using an AJAX function to retrieve data from two different server-side scripts and populate two separate HTML elements on the page

My goal in this coding situation is to change values in multiple DOM targets. The example from Tizag shows the DOM being altered within the onreadystatechange function, like this: if(ajaxRequest.readyState == 4){ document.myForm.time.value = ajaxRequ ...

AngularJS is having trouble parsing JSON data accurately

I have developed an application that utilizes AngularJS HTTP Get method to read data from a JSON file. However, I am encountering an issue where the expected results are not being displayed in the table. Below is the code snippet: HomeController using S ...

Unexpected error occurred when attempting to fetch the jQuery value of the radio button: "Unrecognized expression syntax error"

I am facing an issue while trying to extract the value of a radio button using $("input[@name=login]"); I keep getting an "Uncaught Syntax error, unrecognized expression" message. To view the problem, visit http://jsfiddle.net/fwnUm/. Below is the complet ...

Is it possible to create a dynamic template in Angular using external sources?

My goal is to dynamically load HTML content using AJAX and then compile it, as it contains Angular directives. I have a specific class that includes methods for utilizing Angular outside the scope of an angular controller or directive: var AngularHelper ...

Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

I'm having an issue with integrating the flowbite package with TailwindCSS in my Next.js application. Despite configuring everything correctly, I am encountering an error when adding the flowbite.min.js script: GET http://localhost:3000/node_modules/f ...

Error message in React JSX file: "Encountered an issue with 'createElement' property being undefined"

In the file test_stuff.js, I am executing it by using the command npm test The contents of the file are as follows: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; ...

Utilizing Browser and Operating System Information as Body Class

In order to achieve pixel-perfect styling, I want to include the OS and browser information in the body class. This is necessary because fonts may appear differently depending on the OS/browser configuration. After some research and experimentation, I came ...

Error: The property 'combine' of 'winston_1.default.format' cannot be destructured since it is not defined

Encountered an error while using Winston in Node.js, how can we resolve it? The version of Winston I am using is 3.3.3 and winston-daily-rotate-file version is 4.5.0 I attempted npm i winston@next --save, but the error persists. ** Here is the Error Mes ...

Guide to successfully passing a function as a prop to a child component and invoking it within Vue

Is it really not recommended to pass a function as a prop to a child component in Vue? If I were to attempt this, how could I achieve it? Here is my current approach: Within my child component - <template> <b-card :style="{'overflow-y&apo ...

Encountering an issue while retrieving data from my personal server: "Error message states 'Unexpected end of JSON input'."

As a beginner in Backend development, I decided to experiment with API calls and Client-Server interactions. const express = require("express"); const cors = require("cors"); const fetch = require("node-fetch"); const app = e ...

`I am experiencing issues with the HTTP Post functionality`

Whenever I click on the button displayed in the index.html code, an error occurs when the "$http.post" call is made. The web page then displays an alert saying 'Error!', preventing me from saving the new JSON file due to this issue. I need help ...

Combine bar and stacked bar charts on a single graph with morris.js

Can a combination of a stacked bar chart and a regular bar chart be created in morris.js? I have successfully generated a stacked bar chart using the following code: Morris.Bar({ element: 'bar-example', data: [ {x: '2011 Q1', ...