How to pass params to target route using UI Router Tabs - angularjs

Question

I am using UI Router Tabs for navigation/routing. There are three tabs [User, Address and Service]. Individual tab have their own state, url, controller and template.
How can I pass request params (saved object ID, firstname and lastname) from User tab [UserCtrl.js] to AddressCtrl.js and ServiceCtrl.js.
HOW CAN I ACHIEVE THIS?
What I have done so far?
app.js
'use strict';
var app = angular.module('xyzApp', [ 'ui.router','ngResource', 'ui.bootstrap', 'ui.router.tabs']);
app
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$interpolateProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $interpolateProvider, $locationProvider) {
// CSRF Support
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$urlRouterProvider.otherwise('/');
$stateProvider
.state('new', {
url: '/',
controller: 'MainCtrl',
templateUrl: 'partials/base.html'
})
.state('new.user', {
url: '/new/user',
controller: 'UserCtrl',
templateUrl: 'partials/user-tab.html'
})
.state('new.address', {
url: '/new/address',
controller: 'AddressCtrl',
templateUrl: 'partials/address-tab.html'
})
.state('new.service', {
url: '/new/service',
controller: 'ServiceCtrl',
templateUrl: 'partials/service-tab.html',
})
}]);
MainCtrl.js
'use strict';
app
.controller('MainCtrl', ['$scope', function($scope) {
// Inititalise the new personnel page tabs
$scope.initialise = function() {
$scope.go = function(state) {
$state.go(state);
};
$scope.personneltabinfo = [
{
heading: 'User',
route: 'new.user',
//params: {
// userId: $scope.userId
//},
},
{
heading: 'Address',
route: 'new.address',
},
{
heading: 'Service',
route: 'new.service'
}
];
};
$scope.initialise();
}]);
UserCtrl.js
'use strict';
app
.controller('UserCtrl', ['$scope', '$rootScope', '$http', '$compile', '$timeout', 'userServices',
function($scope, $rootScope, $http, $compile, $timeout, userServices) {
$scope.userId = '';
$scope.savePerson = function() {
console.log("This is userData:" + $scope.userData);
// user resource service
userServices.addUser($scope.userData)
.then(function(data) {
// pass $scope.userId to [Account and Service] routes view.
// pass firstname and secondname value to [Account and Service] routes view so it’s value can be shown on their panel-title.
$scope.userId = data.id;
toastr.success('Personnel ' + $scope.baseData.first_name + ' record saved into database');
}, function(data, status, headers, config) {
toastr.error('Field Error:' + " Please fill all fields mark with * ");
});
};
}]);
I'm angular beginner!

Answer 1

If I understand your question, you want to pass the data from a controller to another controller.
You can check on: Passing data between controllers in Angular JS?
You can use :
a service: https://docs.angularjs.org/guide/services,
$rootScope but that's not the best solution,
or the binding data between components: https://docs.angularjs.org/guide/component