javascript - How does one properly use state parameters to scope variables when clicking the back button using the ui router? -
i create tabs dynamically, , each tab gets own state url , state parameters. state parameter used scope variables in tabs. use ui router. works fine i.e. tabs , contents displayed when clicking respective tab headers.
however, when using browser's (and forward) button, variables in tabs not scoped anymore when clicking again respective headers scoped again (as expected) respective state parameters.
how can 1 scope variables in dynamically created tabs when hitting back/forward button, is, when going , forth between different tabs, how can 1 make sure variables scoped respective state parameter.
i grateful --- apologies if trivial new game.
here relevant code snippets:
main html file tabs.html
<ul> <li ng-repeat="item in times">{{item.name}} <button type="button" class="btn btn-primary" ng-click="newtab(item)">show more</button> </li> </ul> ... <tabset> <tab ng-repeat="t in tabs" select="go(t.route, t.param)" active="t.active"> <tab-heading> <span>{{t.heading}}</span> </tab-heading> </tab> </tabset> <div ng-repeat="t in tabs" ui-view="{{t.view}}"></div> main controller
.controller('tabctrl', ['$scope', '$rootscope', '$state', '$stateparams', function ($scope, $rootscope, $state, $stateparams) { ... // 2 fixed initial tabs $scope.tabs = [ { id: "0", heading: "tab 0", route: "app.tabs.tab0", param: {}, view: "tab0", active: true }, { id: "1", heading: "tab 1", route: "app.tabs.tab1", param: {}, view: "tab1", active: false } ]; // set respective tab active when hitting button $scope.go = function(route, param){ $state.go(route, param); }; $scope.active = function(route){ return $state.is(route); }; $rootscope.$on("$statechangesuccess", function() { $scope.tabs.foreach(function(tab) { tab.active = $scope.active(tab.route); }); $scope.newtab = function (item) { angular.foreach($scope.tabs, function(tab) { tab.active = false; }); var id = $scope.tabs.length + 1; $scope.tabs.push( { id: id, heading: item.name, route: "app.tabs.details", param: { id: id, stuff: item }, view: "details", active: true } ); } ... }]); app config
.config(['$stateprovider','$urlrouterprovider','$httpprovider', function($stateprovider, $urlrouterprovider, $httpprovider) { ... $stateprovider .state('app.tabs', { abstract: true, url:'tabs', views: { 'content@': { templateurl:'tab.html', controller: 'tabctrl' } } }) .state('app.tabs.tab0', { url: '/tab0', views: { 'tab0@app.tabs': { templateurl:'tab0.html', controller: 'tabctrl' // same main controller } } }) .state('app.tabs.tab1', { url: '/tab1', views: { 'tab1@app.tabs': { templateurl:'tab1.html', controller: 'tab1ctrl' } } }) .state('app.tabs.details', { url: '/details/:id', views: { 'details@app.tabs': { templateurl:'details.html', controller: 'detailsctrl' } }, params: { id: '', stuff: '' } }); ... }]);
i have found solution looks bit dirty comments how improve welcome. solution makes use of session storage.
the changed html code
<ul class="nav nav-tabs"> <li ng-repeat="tab in tabs" ng-class="{active: $state.includes(tab.route, {stuff: tab.param.stuff})}" ng-click="go(tab.route, tab.param)"> <a>{{tab.heading}} </a> </li> </ul> and relevant changes in controller are
$scope.tabs = [ { id: "0", heading: "tab 0", route: "app.tabs.tab0", param: {stuff: ""}, view: "tab0" }, { id: "1", heading: "tab 1", route: "app.tabs.tab1", param: {stuff: ""}, view: "tab1" } ]; $scope.go = function(route, param){ $state.go(route, param); ... }; $scope.$on("$statechangesuccess", function() { $scope.tabs = json.parse($window.sessionstorage.alltabs); $scope.tabs.foreach(function(tab) { var withinstate = $state.includes(tab.route, {stuff: tab.param.stuff}); var outsidestate = !$state.includes('app.tab'); if (withinstate) { $scope.go(tab.route, tab.param); } if (outsidestate) { delete $window.sessionstorage.alltabs; } }); }); $scope.newtab = function (item) { var id = $scope.tabs.length; $scope.tabs.push( { id: id, heading: item.name, route: "app.tabs.details", parameters: { stuff: item}, view: "details" } ); $window.sessionstorage.alltabs = json.stringify($scope.tabs); var route = $scope.tabs[id].route; var param = $scope.tabs[id].param; $state.go(route, param); $window.scrollto(0, 0); } 
Comments
Post a Comment