Display a login/logout button on the navbar of an AngularJS app page based on certain conditions

Welcome.jsp

<html>
<body ng-app="myApp">

<div class="menu">
   <a href="/home"> Home </a>
   <a href="/orders" ng-show="$scope.isUserLoggedIn"> View Orders </label>
   <a href="/logout" ng-show="$scope.isUserLoggedIn"> Logout </label>
   <a href="/login" ng-show="!$scope.isUserLoggedIn"> Login </label>    
</div>
<div ng-view></div>
</body>
</html>


Controllers

var myApp = angular.module('myApp', ['ngRoute']);
...    
            // route for the default home page
            .when('/', {
                templateUrl : function($node, tattrs) {
                      return "resources/html/home.html";
                },
                controller  : 'mainController'
            })


            // route for the orders page
            .when('/orders', {
                templateUrl : function($node, tattrs) {
                      return "resources/html/orders.html";
                },
                controller  : 'ordersController'
            })

....

myApp.controller('mainController', function($scope, $http) {
    ....
    $scope.isUserLoggedIn = true; //or false
.....


Question:
The $scope.isUserLoggedIn is not affecting the visibility of the Login/Logout buttons. It seems that the scope is not accessible on the main app page (i.e in the menu in the ng-app page). I need a way to conditionally show/hide the Login/Logout button. Any suggestions?

Answer №1

Make sure to set controller for the div element

Avoid using $scope in this case, simply do the following:

<div class="header" ng-controller="appController">
   <a href="/home"> Home </a>
   <a href="/about" ng-show="isLoggedIn"> About Us </label>
   <a href="/login" ng-show="!isLoggedIn"> Login </label>    
</div>

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

Determine if a line intersects with a mesh in a three.js environment

Within the scene, there are several cylinders present. Upon user interaction with specific points, I am generating a line (THREE.Line) connecting those points. However, I am facing an issue with checking for intersections between the line and the cylinders ...

What is the process for modifying the characteristics of an RMWC Component?

How can I dynamically change the icon attribute in my RMWC Button element when an onClick event occurs? <Button outlined icon={<CircularProgress />} onClick={(e)=> { // e.currentTarget.icon = ''; // console.log(e.c ...

I developed a real estate listing web application using AngularJS, where I chose to use the $http service to fetch data. Unfortunately, the data retrieval process seems to be failing. Can someone help me identify the issue?

Hey there, I have identified three files which seem to be at the root of the problem. Instead of using POST, GET, PUT, DELETE methods, I am intentionally experimenting with $http. Let's take a look at mansionsController.js file: angular .module( ...

Iterate over a collection of objects to find connections between the starting and ending points, and retrieve the number of occurrences

My challenge involves analyzing an array of objects containing origin and destination data, and the total volume of objects moving between locations. I am specifically looking to compare flow counts between two cities. For example, when the origin is Vanco ...

Running a cfquery in a cfc and passing parameters through AJAX

I am currently setting up a system to retrieve data from my ColdFusion database using JavaScript. However, I am encountering an error and unsure of its cause since I am relatively new to CF. The specific engine I am utilizing is ColdFusion MX 7. Below is ...

the `req.body` method fetches an object with a property named `json

Having an issue with accessing data from req.body in my form created with JS { 'object Object': '' } //when using JSON.stringify: { '{"A":"a","B":"b","C":"c"}': &apo ...

When the click event is triggered, the second function guess() does not execute

I am currently developing a number guessing application. It consists of two functions, the first one called startGame() works correctly (it receives the maximum number and then disappears by adding the hidden class). However, the second function that is ...

AngularJS does not allow access to the variable value outside of the resource service's scope,

I have developed an AngularJS factory service to handle REST calls. The service is functioning correctly, but I am facing a challenge where I need to set values into $scope.variable and access them outside of the resource service. However, when attempting ...

What is causing the behavior of this JavaScript code in the Execution Context?

I recently delved into the world of asynchronous programming in JavaScript and wanted to share some code for examination: const myPromise = () => Promise.resolve('Success!'); function firstFunction() { myPromise().then(res => console. ...

Retrieve various objects from separate files using Node.js

Throughout the development of my Node.js project, which I have been working on since my teenage years and consists of a multitude of files, I have initialized numerous objects in the index.js file. This is also where all function calls originate. In order ...

Is there a way to dynamically import images in Next JS without having to place them in the public folder?

Currently, I am developing a textbook website in which authors contribute textbook folders containing markdown files and images: textbooks ├───textbook-1 │ ├───images │ └───markdown-files └───textbook-2 ├── ...

assigning attributes to web addresses

Is there a way to set a style property for webpages by targeting addresses that contain /index.php/projecten/ instead of specifying each complete address in the code? Currently, I am using the following code: <ul class="subnavlist" style="display: &l ...

Determine if a specific date occurred at least one day ago using momentjs

Is there a way to determine if a specific date is at least one day (24 hours) in the past using momentjs? For example: const currentDate = moment() const isAtLeastOneDayAgo = currentDate.subtract(dateToVerify) > 1 // How can this be done? ...

Styling Table Headers with JavaScript and CSS

Currently, I have a Javascript function that returns a specific value. When this value is returned, I want to dynamically change the colors of different table headers based on their id. Is there a way to change the color of a table header in javascript wi ...

Is there a way in JQuery to apply the CSS of one element to another selected element?

I'm curious if there is a JQuery function available that can be used to transfer the exact CSS styles from one element to another. I want all the CSS properties to be applied without any additional inheritance. For example: <div id="d1"> &l ...

Creating a sliding bottom border effect with CSS when clicked

Is there a way to animate the sliding of the bottom border of a menu item when clicked on? Check out the code below: HTML - <div class="menu"> <div class="menu-item active">menu 1</div> <div class="menu-item">menu 2</ ...

The content within the iframe is not displayed

I've set up a dropdown menu with separate iframes for each option. Here's the code I used: $(function(){ $('#klanten-lijst').on('change',function(){ $('#klanten div').hide(); $('.klant-'+t ...

Running multiple npm scripts on both Unix and Windows systems can be achieved by using the "npm

Is there a way for me to execute multiple npm scripts synchronously, one after another? Below are the npm scripts I have in my project, which includes both bower and npm packages: { "scripts": { "installnpm": "npm i", "installbower": "bower i", ...

Store a JSON object without creating a reference to it

My issue is presented in a much simpler manner. Here is the json (you can view it here if you wish) {"resource":[{"id":"1408694994","obj":[{"id":"1","action":[{"name":"ON","id":"301"},{"name":"OFF","id":"302"}]},{"id":"2","action":[{"name":"ON","id":"303 ...

What is the method for executing a nested query in the Parse API?

Within the user object, there is a list of features: skills: {"piano:10", "singing:5", ....}; I am looking to filter users based on their 'piano' skills. How can I achieve this? It doesn't have to be an exact match but should follow the ru ...