ui-sref params option with $state.href not working as expected - angularjs

I have a state definition like this:
$stateProvider.state('password', {
url: '/password',
templateUrl: 'password.html',
controller: 'PasswordController',
controllerAs: 'ctrl',
params: {
accountNumber: {
value: null,
squash: true
}
},
});
I need to reference this state with its href rather than using ui-serif directive, How can I set params.accountNumber inside href?
This doesn't work:
$state.href('password', {accountNumber: $scope.accountNumber})
When I change this line url: '/password', to ` url: '/password?accoutNumber', and remove this part
params: {
accountNumber: {
value: null,
squash: true
}
},
$state.href works just fine.

To be able to generate URL with $state.href and pass parameter...
such parameter must be part of url definition
declaring it just in params: {} will result in href - not containing it, not passing it
there is adjusted state definition:
.state('password', {
url: '/password/:accountNumber',
templateUrl: 'password.html',
controller: 'PasswordController',
controllerAs: 'ctrl',
params: {
accountNumber: {
value: null,
squash: true
},
},
});
There is a working plunker
ORIGINAL part, related to typo
The $state.href() call seems to be ok... just a state definition could be wrong:
$stateProvider.state('password', {
//Url: '/password',
url: '/password',
...
The url setting is case sensitive. See state.href doc here:
href(stateOrName, params, options)

Related

Angularjs $stateProvider issue

I have those 2 states for my page :
$stateProvider
.state("page", {
url: "/:pageId/:pageType",
template: pageTemplate,
controller: "contentCtrl",
resolve: {
...
}
},
params: {reload: true}
})
and
.state("schedule", {
url: "/Schedule/:scheduleId/:pageId/:pageType",
template: pageTemplate,
controller: "contentCtrl",
resolve: {
...
}
},
params: {
pageId: { squash: true, value: null},
pageType: { squash: true, value: null},
reload:true
}
})
SOMETIMES, for link's like this :
http://localhost:8182/index.html#/Schedule/691d6981b8dd47e0a158d67cb02b1fee/
the 'page' state is loading instead of the 'schedule' one.
What should I do to fix this?
PS: I'm using AngularJS v1.7.6 and ui-router v0.2.18
The routes are matched in the order they are defined. However, exact matches take precedence over parameterized matches.
I would at first try to change the order of the states.
then I would try to do something like
$stateProvider.state('foo.bar', {url: '/foo/:bar'});
$stateProvider.state('foo.baz', {url: '/foo/baz'});
$urlRouterProvider.when( '/foo/baz', function($state){ $state.go('foo.baz'); } );
Also I see two problems:
what's with that uppercase in /Schedule/
what's with params: {reload: true}"

angularjs 1.5 pass a parameter to component with ui-sref

AngularJS 1.5, using ui-router and components.
How do I pass a parameter inside a component using the ui-sref directive?
header.html:
<a ui-sref="dashboard({contentType: 'company'})">Company</a>
app.js:
.state('dashboard', {
url: "/dashboard",
component: "dashboard",
resolve: {
}
})
dashboard-component.js:
angular.module('myModule').component('dashboard', {
templateUrl: '/views/admin/dashboard.html',
controller: DashboardController,
binding: {
contentType: '<' // This is not working...
}
});
dashboard.html: (Expects to see contentType in here - but No...)
contentType: {{$ctrl.contentType}}
You need to tell your state that it could be called with some params. There are two ways you can have params. Here's a simple explanation:
Params that are part of URL
.state('dashboard', {
url: "/dashboard/:contentType",
component: "dashboard",
resolve: {
...
}
})
Params that are not part of URL
.state('dashboard', {
url: "/dashboard",
params: {contentType: null},
component: "dashboard",
resolve: {
...
}
})
EDIT: If you see, In the plunker I provided in comments, they are not directly trying to use the param value in controller, but they are using it to get something resolved.
Now, coming to your problem's solution,
One way is, you can inject $stateParams in controller and use $stateParams.tester.
Or, if you want, you can also use resolve to directly get the passed value, like:
$stateProvider.state('userlist', {
url: '/users',
params: {
tester: null
},
component: 'users',
resolve: {
tester: function($stateParams) {
return $stateParams.tester;
}
}
});
second example plunker
Add url param contentType in the state
.state('dashboard', {
url: "/dashboard/:contentType",
component: "dashboard",
resolve: {
}
})

Getting undefined for $stateParams

I am trying to pass data from one controller to another using $stateParams but getting null instead of valid data:
Please find my route code below:
.state("root.home", {
url: "/home",
abstract: true,
template: homeHtml,
controller: "HomeCtrl as ctrl",
})
.state("root.home.content", {
url: "",
params: {
userId: null,
},
views: homeView,
})
Controller A code:
$state.go("root.home.content", {userId}); // getting correct UserId
HomeCtrl code:
// In its constructure I injected the $stateParams
init() {
console.log($stateParams); // getting undefined here
if ($stateParams && $stateParams.userId) {
this.loadUser($stateParams.userId);
}
}
Pass your parameter as below
$state.go("root.home.content", {'userId': userId});
//This userId should be a valid variable inside your Controller A
And also you should edit your router as below,
.state("root.home.content", {
url: "/:userId",
params: {
userId: null,
},
views: homeView,
})
Otherwise it will not show in the url & cannot access from $stateParams
I fixed this by adding params to parent root instead of child. The correct code is:
.state("root.home", {
url: "/home",
params: {
userId: null,
},
abstract: true,
template: homeHtml,
controller: "HomeCtrl as ctrl",
})
.state("root.home.content", {
url: "",
views: homeView,
})

Parent's state params empty on $urlRouterProvider.otherwise state reload

I have my state configurations defined as below:
$stateProvider
.state('parentState', {
abstract: true,
url: '/:tenantId/',
param: {
tenantId: {
array: false
}
},
views: {
'header#': {
templateUrl: 'home/header.html',
controller: 'Header as vm'
},
'footer#': {
templateUrl: 'home/footer.html',
controller: 'FooterCtrl as vm'
}
},
resolve: userResolve,
data: {
private: true
}
})
//...4-5 other child states, then a state to handle unknown urls
.state('parentState.otherwise', {
views: {
'#': {
templateUrl: 'home/404/pageNotFound.html',
controller: 'PageNotFoundCtrl as vm'
}
}
});
$urlRouterProvider.otherwise(function ($injector) {
$injector.get('$state').go('parentState.otherwise', {}, {
location: false
});
});
Now, when an invalid URL is entered, parentState.otherwise state loads correctly, and parentState param, i.e. tenantId, is also correctly filled.
However, on page reload(refresh, Ctrl + R) with same invalid URL, parentState.otherwise state loads, but the problem is parentState param, i.e. tenantId is coming as empty string("").
Somehow, with location: false, the parent state, i.e. parentState in this case, was not picking up tenantId param from the URL on page refresh. So, if we explicitly pass tenantId param to child state, i.e. parentState.otherwise while opening it, everything works perfectly even on page refresh:
$urlRouterProvider.otherwise(function ($injector) {
$injector.get('$state').go('parentState.otherwise', {
tenantId: 'someTenantId'
}, {
location: false
});
});

How to use params without showing in url?

controllerA from state A
$state.go('account.accountRegister', {accountType: $stateParams.accountType, acName: acName})
State defined in app.js
.state('account.accountRegister', {
url: '/:accountType/register',
params: {accountType, acName},
views: {
'mainView#':{
templateUrl: 'app/views/registration.html',
controller: 'registrationController'
}
}
})
controllerB from state B
console.log($stateParams.acName); // is getting undefined
How to use acName in the controller without showing in the url part of the state?
I came up with a solution
.state('account.accountRegister', {
url: '/:accountType/register',
params: {
acName: {
value: 'defaultValue',
squash: false
}
},
views: {
'mainView#':{
templateUrl: 'app/views/registration.html',
controller: 'registrationController'
}
}
})
For more info on squash property of the params object:
https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.$stateProvider

Resources