Prevent Loading of Nested States in UI-Router

Imagine having two states configured using angularjs ui-router:

.state('branding', {
    url: "/{branding}",
    controller: 'BrandingCtrl',
    templateUrl: '/app/Branding.html'
})
.state('branding.index', {
    url: "/index",
    controller: 'IndexCtrl',
    templateUrl: '/app/Index.html'
})

Inside the BrandingCtrl, the page details are set up along with user access verification. If access is denied, $state.go('someotherstate') is used to redirect them.

If a user navigates to /badbranding/index, the BrandingCtrl detects the lack of access and changes the state. However, the IndexCtrl still runs, despite the parent controller already changing the state.

How can ui-router be instructed to cancel the execution of nested states?

javascriptangularjsangular-ui-router

Answer №1

To prevent the parent controller from executing, I made it a resolve requirement. At first, I hesitated because it seemed like $state didn't know about the parameters, but then I realized that $stateParams had the information I needed.

.state('branding', {
        url: "/{branding}",
        resolve: {
            HasAccess: function ($q, $stateParams) {
                var deferred = $q.defer();
                var branding = $stateParams.branding;

                if (/*doesn't have access*/)
                    deferred.reject('you do not have access');
                else
                    deferred.resolve();

                return deferred.promise;
            }
        },
        controller: 'BrandingCtrl',
        templateUrl: '/app/Branding.html'
    })

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

Three.js object changing position along the curve of a bowl

I am currently developing a threejs game. My goal is to have a ball move from the z-position of -5000 to 0. This is how I am creating the mesh: let geometry = new THREE.SphereGeometry(100, 32, 32); let material = new THREE.MeshBasicMaterial({ ...

javascript3dthree.js

Having trouble with the submit button when using AngularJS and ModelForm?

My goal was to design a page that would showcase the contents of the database in a table format, with an added functionality of allowing users to input a new entry using a form. Initially, everything was functioning as intended with a "New" button triggeri ...

angularjsdjangodjango-forms

How can you assign various models to a single directive?

Exploring angularjs, I am interested in creating a dual list box with two lists - one on the left containing all items, and another on the right for selected items that can be transferred back and forth. Using arrows to facilitate this movement. While it ...

angularjsangularjs-directive

Using angular.copy function to copy an array with a custom property

Let's use the example below to illustrate an issue: var ar = [4, 2, 3]; ar.$x = 'something'; var br = angular.copy(ar); console.dir(br); After copying ar to br, the $x property is no longer present. This is because when Angular copies an a ...

javascriptarraysangularjscopy

Stripping the prefix from a string using the .split function leads to an error message stating "Unexpected

When dealing with a string containing a unique prefix, I attempted to separate it into an array after the backslash character "\" by using the split function. Here is the string: i:0#.w|itun\allepage_fg This was my approach: function claimOrder ...

javascriptjquerystringsplitsubstring

How can I make the lines of my drawer thicker in Material UI?

Currently, I'm in the process of implementing a left-side navigation bar for a web application I'm developing. The main challenge I'm facing is customizing the styles as desired when using the Drawer component. Specifically, I'm aiming ...

javascripthtmlcssmaterial-ui

When setting up a new nodejs/express project, I encountered an issue where the fresh installation would fail

After setting up node and express on my new development server, I created a test application by running the command below: dev-server15:/var/www# express mytest create : mytest create : mytest/package.json create : mytest/app.js ... The npm ...

javascriptnode.jsexpress

Mismatch in SSL version or cipher for ExpressJS

I am encountering an issue with https in express and I am struggling to comprehend it: Here is the code snippet from my previous project (which functions correctly): index.js: var fs = require('fs'); var http = require('http'); var ...

javascriptnode.jsexpresshttpscertificate

text field remaining populated

I have a form where the input fields clear when they are clicked on. It works well on most pages, but there is a specific type of page where it is not functioning properly due to the presence of another javascript running. - issue observed // On this pa ...

javascriptjquery

The web server is serving an HTML file instead of the expected JSON response

Is there a way to extract the JSON data from ? I have tried using AJAX but it only retrieves the entire HTML page instead. $.ajax({ url: 'http://www.bartdekimpe.be/anoire/index.php/admin/getGamesUserJson/34', success: function(data) { ...

javascriptjqueryajaxjson

Effects of jQuery Show / Hide on adjacent select box operations

I created a pair of select boxes where the visibility of one is controlled by the other. Initially, the controlled select box (#select02) works perfectly on page load as long as I don't show/hide it by selecting options in the controlling select box ( ...

javascriptjqueryhtml

Send the chosen item from the <b-form-select> element to the parent component through props

Using Vue.js, I have successfully created a form where all input fields pass their values except for the <b-form-select> element. How can I pass the value of the selected option in <b-form-select> to the parent component? Child Component: < ...

javascriptvue.jsaxiosbootstrap-vue

"Using SetState frequently results in multiple rerenders of the component

Currently, I am developing a messenger application with a main screen component that displays all messages. My goal is to make sure that whenever a user sends or receives a message, the component updates the Flatlist to show the latest sent message. To ach ...

javascriptreactjsreact-native

Troubleshooting: ng-disabled feature is not properly functioning with Bootstrap buttons

I am currently using a combination of bootstrap.js and angular js in my project. The code snippet I have is as follows: //snippet from the controller $scope.isWaiting = true; $scope.promise = $http.get("voluumHandler.php?q=campaigns&filter=traffic-sou ...

javascriptajaxangularjstwitter-bootstrap

What is the best way to assign an ID to a specific HTML element within NetSuite's Document Object Model

Attempting to utilize jQuery in NetSuite to assign a value to an element for testing purposes, but struggling to locate the HTML DOM ID of certain custom drop-down lists. It's not the internal ID. For example: <input type="text" id="soid"> Wh ...

javascriptjquerydomnetsuitesuitescript2.0

Incorporate an external library

I am currently facing a challenge in my angular2 project where I need to import a 3rd party library. Here are the steps I have taken so far: ng new myproject npm install --save createjs-easeljs npm install @types/easeljs However, I am stuck at this poin ...

javascriptangulartypescriptangular-cli

Express: when req.body is devoid of any data

My server code using Express: const express = require('express'); const exphbs = require('express-handlebars'); const path = require('path'); const bodyparser = require('body-parser'); const app = express(); cons ...

javascriptnode.jsexpresspost

Using Jest or Mocha alongside Vue: Uncaught SyntaxError: Cannot use import statement outside a module

Update: This post has undergone multiple edits, please refer to this new Stackoverflow post for a clearer explanation of the issue: SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial I have been searc ...

javascriptvue.jsjestjsmocha.jsvue-test-utils

Using Jquery to make an Ajax request to an Asp.net Web Method

My current approach involves using a jquery method to transmit only the member identification # from the client side to the server side. On the server side, I have a traditional Web Method in place to receive the data and execute SQL queries accordingly. ...

javascriptjqueryasp.netajaxwebmethod

Utilize a for loop in Vue.js to save a fresh array of objects in a structured format

Trying to achieve the following using Vue: I have two JSON objects that provide information on languages and the number of inputs per language. Using nested loops, I display all the inputs. My goal is to create an object for each input with additional det ...

javascriptarraysjsonvue.jsfor-loop