Delayed Reaction: AngularJS ng-if Not Triggering on Time

Question

Delayed Reaction: AngularJS ng-if Not Triggering on Time

Currently, I am implementing ui.router and integrating my navigation in the main HTML file as shown below:

<header ng-if-start="logedin()"></header>
<navigation ng-if-end="logedin()"></navigation>

The logedin() boolean value is determined by a function within the angular.module().run():

$rootScope.$on('$stateChangeStart', function(e, to)

If a user clicks on logout within the navigation, it triggers this function within the controller:

$scope.logout = function() {
    store.remove('jwt');
    $state.go('login');
}

However, an issue arises where the navigation does not hide after the $state.go until the page is refreshed.

I'm wondering if I need to re-render the main index template/view (and if so, how?) or what other solutions are available to solve this problem?

javascript angularjs angular-ui-router

Answer 1

Answer №1

After figuring it out on my own, I realized that I forgot to include the logedin() method in my initial explanation.

The issue was:

$scope.logedin = function() {
return $rootScope.logedin
}

The $rootScope.logedin variable was defined in the angular.module().run() function.

To resolve this problem, I created a basic getter/setter service.

angular.module('sample')
    .service('sharedLogedIn', function () {
        var property = true;

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

Answer 2

After figuring it out on my own, I realized that I forgot to include the logedin() method in my initial explanation.

The issue was:

$scope.logedin = function() {
return $rootScope.logedin
}

The $rootScope.logedin variable was defined in the angular.module().run() function.

To resolve this problem, I created a basic getter/setter service.

angular.module('sample')
    .service('sharedLogedIn', function () {
        var property = true;

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

Answer 3

Answer №2

Great news that the problem has been resolved. It seems like there may be an issue with the propagation of values in your code. Here are some troubleshooting steps you could take:

<header ng-if="loggedinBool"></header>
<navigation ng-if="loggedinBool"></navigation>

1) Try assigning the value of loggedin() to a scope model or service property (preferably loggedinBool) and check if the values propagate correctly after logging out, which should change the value of loggedinBool.

2) If the first step doesn't work, consider using $broadcast/$emit during logout to capture and change the value of loggedinBool. This should facilitate two-way binding, otherwise try using $scope.digest() or $scope.apply() methods to see if the values propagate successfully.

Answer 4

Great news that the problem has been resolved. It seems like there may be an issue with the propagation of values in your code. Here are some troubleshooting steps you could take:

<header ng-if="loggedinBool"></header>
<navigation ng-if="loggedinBool"></navigation>

1) Try assigning the value of loggedin() to a scope model or service property (preferably loggedinBool) and check if the values propagate correctly after logging out, which should change the value of loggedinBool.

2) If the first step doesn't work, consider using $broadcast/$emit during logout to capture and change the value of loggedinBool. This should facilitate two-way binding, otherwise try using $scope.digest() or $scope.apply() methods to see if the values propagate successfully.

Delayed Reaction: AngularJS ng-if Not Triggering on Time

Answer №1

Answer №2

Similar questions

Error message in Ember JS: "#<error>" is uncaught within the {{#each}} statement

When using Express.js with body-parser, the request.body value is often found to be undefined

Using ng-repeat to bind checkboxes to an object

How can I select the div inside the second to last li element?

What is the method for inserting innerHTML into a static file being transmitted by node JS?

Maximizing page space with ReactJS and advanced CSS techniques

Issue in React: Unable to choose options from a dropdown menu once a value attribute has been assigned to the component's state

execute a command from the controller

Learn how to easily copy the success result from an Ajax call to your clipboard

What steps should be taken to showcase user input in a newly created task?

I'm looking to enhance my code by adding a new user login password. How can I achieve this?

Using TypeScript, invoking a function inside a callback

problem with selecting multiple options in ASP.NET dropdown menu

`Creating a fluid MySQL table using JavaScript`

Why is req.app.post(...)create_event not functioning as expected?

Utilize elements within a for loop to iteratively access distinct anchors

No matter how many times I try to change the image, it remains the

NodeJs Importing a File

MongoDB ratings are failing to update as anticipated

Organize elements from an array in a clockwise manner into a container based on a boolean