Как передать параметры целевому маршруту с использованием вкладок UI Router

Question

Я использую UI Router Tabs для навигации/маршрутизации. Есть три вкладки [Пользователь, адрес и услуга]. Отдельная вкладка имеет свои собственные состояние, url, контролер и template.

Как я могу передать запрос PARAMS (сохранен идентификатор объекта, ПгвЬЫат и фамилия) из вкладки User [UserCtrl.js] к AddressCtrl.js и ServiceCtrl.js.

КАК Я ДОСТУПНЫ ЭТО?

Что я сделал до сих пор?

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 * "); 
      }); 
     }; 

}]); 

Я угловатый новичок!

Answer 1

Если я понимаю ваш вопрос, вы хотите передать данные с контроллера на другой контроллер.

Вы можете проверить: Passing data between controllers in Angular JS?

Вы можете использовать:

• службу: https://docs.angularjs.org/guide/services,
• $ rootScope, но это не самое лучшее решение,
• или связывание данных между компонентами: https://docs.angularjs.org/guide/component