Come passare i dati personalizzati in $ state.go() in angular-ui-router?

Question

Voglio passare un oggetto personalizzato a un altro stato tramite $state.go() nel UI-Router.

var obj = { 
    a: 1, 
    b: 2, 
    fun: function() { 
     console.log('fun'); 
    } 
} 
$state.go('users', obj); 

ma ho bisogno di correre fun() in stato di destinazione, quindi non può passare questo oggetto nel parametro URL. Nel controllore di destinazione, ho cercato di recuperare il valore di obj via $stateParams ma ho ottenuto oggetto vuoto {}:

function UserCtrl($stateParams) { 
    console.log($stateParams); // will be empty 
} 

Così come passare obj affermare "utenti" in modo corretto?

Answer 1

var obj = { 
    a: 1, 
    b: 2, 
    fun: function() { 
     console.log('fun'); 
    } 
} 
$state.go('users', obj); 
..... 

$stateProvider 
.state('user', { 
    url: '/user/:obj', 
    templateUrl: 'templates/user.html', 
    controller: 'UserCont' 
}) 

..... or ..... 

$stateProvider 
.state('user', { 
    url: '/user', 
    params: { 
    obj: null 
    }, 
    templateUrl: 'templates/user.html', 
    controller: 'UserCont' 
}) 

..... 

function UserCtrl($state) { 
    console.log($state.params.obj); 
} 

Answer 2

Definire stato con parametri simili:

$stateProvider 
.state('user', { 
    url: '/user', 
    params: { 
    obj: null 
    }, 
    templateUrl: 'templates/user.html', 
    controller: 'UserCont' 
}) 

momento della chiamata parametro passaggio simili:

$state.go('user',{obj: myobj}); 

nel controllore UserCon ricevere parametro come:

$state.params.obj 

Utente $ Stato è uno dei parametri nel dispositivo di controllo definito come

function UserCon($scope, $http, $state){ 

Answer 3

//Use the method chaining mechnism as show below: 
var RoutingApp = angular.module('RoutingApp', ['ui.router']); 
RoutingApp.config([ '$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider,$locationProvider){ 


    $stateProvider 
     .state('home', { 
      url:'/home', 
      templateUrl: 'template/home.html', 
      controller: 'homeController as homeCtrl', 
      data: { 
       customDatahome1:"Home Custom Data 1", 
       customDatahome2:"Home Custom Data 2" 
      } 
     }) 
     .state('courses', { 
      url:'/courses', 
      templateUrl: 'template/courses.html', 
      controller: 'coursesController as coursesCtrl', 
      data: { 
       customDatacourses1:"Courses Custom Data 1", 
       customDatacourses2:"Courses Custom Data 2" 
      } 
     }) 
     .state('students', { 
      url:'/students', 
      templateUrl: 'template/students.html', 
      controller: 'studentsController' 
     }) 
     .state('studentDetails', { 
      url:'/students/:id', 
      templateUrl: 'template/studentDetails.html', 
      controller: 'studentDetailsController' 
     }); 
     $urlRouterProvider.otherwise('/home'); 

$locationProvider.html5Mode(true); 
    } ]); 



RoutingApp.controller('homeController', function($state){ 
    var vm = this; 

    vm.message = "Home Page"; 
    this.customDatahome1 = $state.current.data.customDatahome1; 
    this.customDatahome2 = $state.current.data.customDatahome2; 

    this.customDatacourses1 = $state.get('courses').data.customDatacourses1; 
    this.customDatacourses2 = $state.get('courses').data.customDatacourses2; 
}); 

RoutingApp.controller('coursesController', function($scope){ 
    var vm = this; 
    $scope.courses = ['PHP','AngularJS','Hadoop','Java','.Net','C#']; 
    console.log("Hello Courses"); 
}); 

Template: home.html

<h1 ng-controller="homeController as homeCtrl">{{homeCtrl.message}} <br> {{homeCtrl.message1}}</h1> 
<div> 
    Vision Academy is established in 2011 By 2 Software Engineer offer very cost effective training. 
</div> 
<ul> 
    <li>Training Delivered by real time software experts having more than 10 years of experience </li> 
    <li>Realtime Project discussion relating to the possible interview questions</li> 
    <li>Trainees can attend training and use lab untill you get job</li> 
    <li>Resume prepration and mock up interview</li> 
    <li>100% placement asistance</li> 
    <li>Lab facility</li> 
</ul> 
<fieldset ng-controller="homeController as homeCtrl"> 
    <legend>Home</legend> 
    Custom Data Home 1 : {{homeCtrl.customDatahome1}}<br> 
    Custom Data Home 2 : {{homeCtrl.customDatahome2}}<br> 

</fieldset> 

<fieldset ng-controller="homeController as homeCtrl"> 
    <legend>Courses</legend> 
    Custom Data Courses 1 : {{homeCtrl.customDatacourses1}}<br> 
    Custom Data Courses 2 : {{homeCtrl.customDatacourses2}}<br> 

</fieldset>