Question

我想通过UI-Router中的$state.go()将自定义对象传递给另一个状态。

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

但是我需要在目标状态下运行fun()，所以我无法在URL参数中传递此对象。在目标控制器中，我尝试通过obj获取$stateParams的值，但获得了空对象{}：

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

那么如何正确地将obj传递给州“用户”？

Answer 1

使用如下参数定义状态：

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

调用pass参数时：

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

在控制器UserCon接收参数中如下：

$state.params.obj

User $ state是控制器中定义的参数之一，如

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

Answer 2

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

模板：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>

如何在angular-ui-router中的$ state.go（）中传递自定义数据？

3 个答案: