when changing state ui router query params being added. in case 'size'
within parent controller 'indexappctrl' scope property attached $stateparams.size doesn't update on state change, $stateparams object does.
as fix i've added listener on $statechangesuccess feels hacky. there better way of ensuring scope updates stateparams changes?
app.js
var indexapp = angular.module('indexapp', ['ui.router']); indexapp.config(function($stateprovider, $urlrouterprovider) { $urlrouterprovider.otherwise('/home'); $stateprovider .state('wizard', { url: '/wizard?size', templateurl: 'wizard/wizard.html', params: { size: 'large' } }) }); indexappctrl.js
var indexapp = angular.module('indexapp'); indexapp.controller('indexappctrl', ['$scope', '$stateparams', function($scope, $stateparams) { $scope.welcome = "welcome to...."; $scope.stateparams = $stateparams; //updates $scope.size = $stateparams.size; // doesn't update $scope.$on('$statechangesuccess', function () { $scope.size = $stateparams.size; //updates }); }]); index.html
<html ng-app="indexapp" lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8"> <title>home</title> </head> <body> <main ng-controller="indexappctrl"> <button ui-sref="wizard">start wizard</button> <ui-view> </ui-view> </main> </body> </html>
your solution not hacky. $scope.size property not updated because controller not re-created when state changes.
the $statechangesuccess defined way update component once state transition has been completed solution correct.
Comments
Post a Comment