I've defined a params object on my parent state and want to assign values to the properties, on child states, and have that value persist to other states. When I navigate to child states I see the $stateParams.property but after assigning a value to $stateParams.property the value is not persisting to the next sibling state.
.state({
name: 'parent',
url: '/parent',
templateUrl: 'app/parent.html',
controller: 'parentController',
controllerAs: 'vm',
resolve: {
user: function(){
return { user: {} };
},
//regionsCountriesInfo: ['$stateParams', function($stateParams){
// return $stateParams.regionsCountriesInfo;
//}],
// edit
regionsCountriesInfo: function(){
return { value: [] };
}
},
children: [
{
name: 'region',
url: '/region',
templateUrl: 'app/region.html',
controller: 'regionController',
controllerAs: 'vm',
ncyBreadcrumb: {
label: 'Regions',
parent: 'parent'
},
resolve: {
user: function(user) {
return user;
},
// edit
regionsCountriesInfo: function(regionsCountriesInfo) {
return regionsCountriesInfo;
}
}
},
{
name: 'user',
url: '/user',
templateUrl: 'app/user.html',
controller: 'userController',
controllerAs: 'vm',
ncyBreadcrumb: {
label: 'Users',
parent: 'parent'
},
resolve: {
user: function(user) {
return user;
},
// edit
regionsCountriesInfo: function(regionsCountriesInfo) {
return regionsCountriesInfo;
}
}
},
// regionController
regionController.$inject = [
'$scope',
'$translate',
'$uibModal',
'$state',
'$stateParams',
'$rootScope',
'regionsCountriesInfo'
];
function regionController($scope, $translate, $uibModal, $state, $stateParams, $rootScope, regionsCountriesInfo) {
...
vm.selectedRegions = [];
...
vm.selectedRegions.push(region)
console.log('regionController regionsCountriesInfo');
console.log(regionsCountriesInfo);
regionsCountriesInfo = vm.selectedRegions;
console.log('regionController regionsCountriesInfo');
console.log(regionsCountriesInfo);
// regionController console output
regionController regionsCountriesInfo
undefined
regionController regionsCountriesInfo
[Object]
// userController
userController.$inject = [
'$translate',
'$uibModal',
'$state',
'$scope',
'$timeout',
'$stateParams',
'$rootScope',
'regionsCountriesInfo'
];
function userController($translate, $uibModal, $state, $scope, $timeout, $stateParams, $rootScope, regionsCountriesInfo) {
...
console.log('userController regionsCountriesInfo');
console.log(regionsCountriesInfo);
// userController console output
userController regionsCountriesInfo
undefined
Why is $stateParams.regionsCountriesInfo empty in the user state when I assigned a value to it in the region sibling state?
You need to use resolve in the parent state as $stateparams only contains params registered with that state.
state({
name: 'parent',
url: '/parent',
templateUrl: 'app/parent.html',
controller: 'parentController',
controllerAs: 'vm',
resolve: {
regionsCountriesInfo: ['$stateParams', function($stateParams){
return $stateParams.regionsCountriesInfo;
}]
}
i think each child create isolated varibles , did you try to repass it to child in routing ?
I guess the problem was that I needed to use a regular resolve object, as the value I needed to persist wasn't in $stateParams to begin with i.e., it was defined in the regionController. See edit above.
Related
I've read many posts but none of them work:
I want to pass some data using $state.go.
this is my state :
.state('app.404', {
url: '404',
views: {
'header#': {
templateUrl: 'views/empty.html'
},
'content#': {
templateUrl: '404.html',
controller: 'fofController'
},
'footer#': {
templateUrl: 'views/empty.html'
},
params: {errorInfo: null}
}
})
this is how I pass the data :
$state.go('app.404', {errorInfo: {status: 403, message: 'unauthorised', fix: 'You have to login'}});
and this is how I try to catch the data in my controller:
.controller('fofController', ['$scope', '$state',
function ($scope, $state) {
console.log($state.params);
}])
but the answer is an empty object ({}). I also used $stateParams like below but I get the same result, an empty object:
.controller('fofController', ['$scope', '$stateParams',
function ($scope, $stateParams) {
console.log($stateParams);
}])
option -1
.state('404.contact/', {
url: '/contact/:obj',
templateUrl: "contact.html",
controller: "contactCtrl",
params: {
obj: null,
}
})
.state('404.header', {
url: '/header/:number',
templateUrl: "header.html",
controller: "headerCtrl",
params: {
obj: null
}
})
option-2
$state.go(.....
You should try this code instead
$state.transitionTo(...
option-3
Perhaps try transferring with url
$stateProvider
.state('user', {
url: '/user/:obj',
templateUrl: 'templates/user.html',
controller: 'UserCont'
})
Maybe these are the solution to the problem.
Working example with $state.go()
So, I have a state where the resolve spits out an array which shows correctly on the frontend.
But I can't seem to be able to pass the parent resolve data to the child state.
$stateProvider.state('berliner', {
url: '/berlinerliste',
params : {search: 'Berliner 2017'},
resolve: {
fair: function(SearchService, $stateParams) {
return SearchService.getAllExhibitors($stateParams.search);
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'bl2017.htm',
controller: function($scope, fair){
$scope.fair = fair;
console.log($scope.fair);
}
}
}
})
.state('berliner.exhibitor', {
url: '/{id}',
resolve: {
exhibitor: function($stateParams, fair) {
var slug = $stateParams.id;
return slug;
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'wop':{
templateUrl: 'exhibitor.htm',
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
}
}
})
All the console log come out undefined.
What am I missing?
PLUNKR
Here's a Plunkr to examplify the issue.
I would say, that the concept should work.. just:
controller belongs to view. not to all views: {}
E.g. this (wrong)
// each view can have controller,
// but views : {} property 'controller' is not used at all
views: {
'header': {
templateUrl: 'header.htm'
},
'wop':{
templateUrl: 'exhibitor.htm',
},
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
should be adjusted as that:
views: {
'header': {
templateUrl: 'header.htm'
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
},
'wop':{
templateUrl: 'exhibitor.htm',
controller: ...
There is an example, how
parent does resolve
child view's controller consumes it
states:
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
resolve: {
example: ['$timeout', function($timeout){
return $timeout(function(){
return {x: 1}
},100)
}],
},
})
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
})
child controller
.controller('ChildCtrl', ['$scope', 'example', function ($scope, example) {
console.log(JSON.stringify(example));
}])
Check it here
I am using a great template for ionic tabs and side menu as having issues with the navigation from the tabs. But when I use the code pen example and structure the html files into a templates folder and update the app.js file I lose the navigation. I obviously do not understand the js link format correctly. Please could someone explain it to me.
My code pen is here
The original is here
app.js (each html file is in www/templates
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry/templates',
templateUrl: 'templates/entry.html',
controller: 'EntryPageController'
})
.state('main', {
url: '/main/templates',
templateUrl: 'templates/mainContainer.html',
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'templates/home.html',
controller: 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'templates/info.html',
controller: 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs.html',
controller: 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
.controller('HomePageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
enter code here
I am stuck with this from around one week. I am resolving my todo_id on "TodoDetailController", and then using a service to get todo details. But the controller is not working as expected. When I write a simple data on $scope its just not reflecting in my view, but the data in $rootscope is reflecting, But I don't want to use $rootscope everywhere.
Can someone please solve my query?
Here is the github project https://github.com/udayghulaxe/ticitic_todo
This is the project structure
This is what I have done so far
/************* My states config ************************/
.state('dashboard', {
url: '/dashboard',
abstract: true,
views: {
'': { templateUrl: './partials/main.html'},
'header_toolbar#dashboard': { templateUrl: './views/header_toolbar.html' },
'sidenavleft#dashboard': { templateUrl: './views/sidenav.html' },
'widgets#dashboard': { templateUrl: './views/widgets.html'},
'todo_detail#dashboard': { templateUrl: './views/todo_detail.html' }
}
})
.state('dashboard.listdetail', {
url: '/lists/:list_id/',
templateUrl: './partials/list.detail.html',
controller:'ListController',
resolve: {
list_id: function($stateParams){
return $stateParams.list_id;
}
},
data: {
authorizedRoles: [USER_ROLES.user],
pageTitle: 'Lists'
}
})
.state('dashboard.tododetail', {
url: '/lists/:list_id/:todo_id',
templateUrl: './partials/list.detail.html',
controller:'TodoDetailController',
resolve: {
list_id: function($stateParams){
//console.log($stateParams);
return $stateParams.list_id;
},
todo_id: function($stateParams){
//console.log($stateParams);
return $stateParams.todo_id;
}
}
})
/**************** My conrtoller *******************/
app.controller("TodoDetailController",['$rootScope','$scope','$state', '$q', 'UserService', '$window','AuthService','DataService','AUTH_EVENTS','list_id','$mdSidenav','todo_id',
function($rootScope,$scope, $state, $q, UserService, $window, AuthService, DataService,AUTH_EVENTS,list_id,$mdSidenav,todo_id)
{
/********* This data is not relecting at all **********/
$scope.list_id = list_id.toString();
$scope.current_list = UserService.GetTodoBylistid($rootScope.lists, $scope.list_id);
$scope.value = 'Not refelcting in view';
/**************** This is updating in view ***************************/
$rootScope.value2 = 'refelcting in view';
$scope.$watch(todo_id, function() {
$rootScope.todo_id = todo_id;
}, true);
toggleSidenav('right');
};
}]);
Inject $rootscope after $scope like this
app.controller("TodoDetailController",['$scope','$state','$rootScope', '$q', 'UserService', '$window','AuthService','DataService','AUTH_EVENTS','list_id','$mdSidenav','todo_id',
function($scope, $state, $rootScope, $q, UserService, $window, AuthService, DataService,AUTH_EVENTS,list_id,$mdSidenav,todo_id)
]);
When I add $uibModalInstance to my controller I get the error:
Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- EventAdditionalInformationTabCtrl
My controller is defined as:
angular.module('myWebApp.controllers').
controller('EventAdditionalInformationTabCtrl', function ($scope, $uibModalInstance, eventData) {
});
I have another controller that defines the open function:
controller('modalCtrl', function ($scope, $uibModal) {
$scope.open = function (template, instance, size) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: template,
controller: instance,
size: size
});
};
}).
Then I want to pass the controller that will handle a specific instance of a modal, in this case EventAdditionalInformationTabCtrl.
My app is defined as:
var app = angular.module('myWebApp', [
'myWebApp.services',
'myWebApp.controllers',
'ui.router',
'duScroll',
'ngAnimate',
'ui.bootstrap',
'angularUtils.directives.dirPagination',
'angular-loading-bar'
]);
What am I missing?
EDIT ----
Here's how EventAdditionalInformationTabCtrl is linked to the view in ui-Router.
$stateProvider
.state('event', {
url: '/event',
params: {
eventId: null
},
resolve: {
eventData: ['$http', '$stateParams', function ($http, $stateParams) {
console.log('EventId: ' + $stateParams.eventId);
return $http.get('http://localhost:10569/api/eventView/' + $stateParams.eventId).then(function(response) {
return response.data;
});
}]
},
views: {
'': {
templateUrl: 'partials/events/event.html'
//controller: 'EventCtrl'
},
'eventHeader#event' : {
templateUrl: 'partials/events/event-header.html',
controller: 'EventHeaderCtrl'
},
'eventOverviewTab#event': {
templateUrl: 'partials/events/event-overview-tab.html',
controller: 'EventOverviewTabCtrl'
},
'eventDSOTab#event': {
templateUrl: 'partials/events/event-dso-tab.html',
controller: 'EventDSOTabCtrl'
},
'eventAdditionalInformationTab#event': {
templateUrl: 'partials/events/event-additional-information-tab.html',
controller: 'EventAdditionalInformationTabCtrl'
},
'eventFooter#event': {
templateUrl: 'partials/events/event-footer.html',
controller: 'EventFooterCtrl'
}
}
});
Where you have $uibModalInstance now should just be $uibModal. Use $uibModalInstance when you want to actually create a modal. This plunker is the official example for how to use $uibModal.
You need to inject '$uibModal' into your controller.
Check out the angular ui docs here https://angular-ui.github.io/bootstrap/#/modal
EDIT:
Change this
animation: true,
templateUrl: template,
controller: instance,
size: size
to this
animation: true,
templateUrl: template,
controller: EventAdditionalInformationTabCtrl,
size: size