Unusual behavior detected in Angular UI-Router's onEnter callback function

Question

Unusual behavior detected in Angular UI-Router's onEnter callback function

Encountering an unusual issue with the onEnter callback for a UI-Router state. Originally, my intention was to modify the data.pagetitle variable in the onEnter callback.

To showcase the problem, I've set up a Plunkr example. In script.js, I included a console.log on line 13 and 14. It appears that there is a difference in the $state variable between these two lines.

This leads to two questions:

What is causing the discrepancy in the $state variable between line 13 and 14?
How can I make changes to a 'data' object within the onEnter callback?

javascript angularjs angular-ui-router

Answer 1

Answer №1

One way to include your own variables in the state is by adding them to the params parameter and then accessing them in the controller.


var app = angular.module('mainApp', ['ui.router']);

// Setting up routes
var Config = function($stateProvider, $urlRouterProvider){

    $stateProvider
        .state('main', {
            template : '{{ pageTitle }}',
            controller : 'MainCtrl',
            params : { pageTitle : 'Hello, world!' }
        });

    $urlRouterProvider.otherwise('main');

};

Config.$inject = [
    '$stateProvider',
    '$urlRouterProvider'
];

app.config(Config);

// Controller 
var MainCtrl = function($scope, $state){

    // Functions
    function initCtrl(){
        $scope.pageTitle = $state.params.pageTitle;
    }

    // Initialize controller
    initCtrl();

};

MainCtrl.$inject = [
    '$scope',
    '$state'
];

app.controller('MainCtrl', MainCtrl);

Answer 2

One way to include your own variables in the state is by adding them to the params parameter and then accessing them in the controller.


var app = angular.module('mainApp', ['ui.router']);

// Setting up routes
var Config = function($stateProvider, $urlRouterProvider){

    $stateProvider
        .state('main', {
            template : '{{ pageTitle }}',
            controller : 'MainCtrl',
            params : { pageTitle : 'Hello, world!' }
        });

    $urlRouterProvider.otherwise('main');

};

Config.$inject = [
    '$stateProvider',
    '$urlRouterProvider'
];

app.config(Config);

// Controller 
var MainCtrl = function($scope, $state){

    // Functions
    function initCtrl(){
        $scope.pageTitle = $state.params.pageTitle;
    }

    // Initialize controller
    initCtrl();

};

MainCtrl.$inject = [
    '$scope',
    '$state'
];

app.controller('MainCtrl', MainCtrl);

Unusual behavior detected in Angular UI-Router's onEnter callback function

Answer №1

Similar questions

Modifying the select option dynamically once it has been activated does not produce the desired result

Positioning a div to the right of another div within a container (box)

Combining Csharp, node.js, and socket.io for seamless integration

Unveiling the secrets to retrieving JSON array objects in HTML with the help of Angular!

Tips for customizing table cell styling in editable cells with React material table

Merge multiple rows into one row with the help of jquery

"Error: Vue prop is not defined when passed to computed functions during initial call

Creating a jQuery Grid with multiple column grouping in PHP - A step-by-step guide

Creating code that is easily testable for a unique test scenario

Unable to iterate through the Array-like Object

What is the method for incorporating multiple classes into an li element?

Ways to retrieve a single variable periodically and refresh it at intervals

Is it possible for Facebook to refresh the page without having to reload the chat features?

Having trouble loading an image after successfully connecting to an API with react.js

When using v-select to search for items, the selected items mysteriously vanish from

Ways to customize date format based on locale in AngularJS

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Warning: The class name hydration discrepancy between server and client (Caution: Property `className` does not correspond between the Server and the Client)

Could the `<script src="show.js"></script>` code pose a threat?

Creating JavaScript classes based on JSON schemas