使用ui路由器在angularjs中重定向页面时如何传递参数？

Question

我试图通过ui-router state.go传递参数

但是,我不知道如何传递参数.这是我的代码

app.config(function($stateProvider) {    
    $stateProvider
        .state('first', {
            url: '/first',
            templateUrl: 'first.html'
        })
        .state('second', {
            url: '/second',
            templateUrl: 'second.html'
        })
})

//my first.html
app.controller.('firstCtrl' ,["$scope", "$state", function($scope, $state){
    $scope.userInput <- come from user
    $scope.clickThis=function() {
        $state.go("second", $scope.userInput);
    }

}]);

//my second.html
app.controller.('secondCtrl,["$scope", "$state", function($scope, $state){
    //How do I get the parameter that is passed to here..
})

我可以将页面重定向到second.html,但我似乎无法获取传递给我的secondCtrl的参数.任何人都可以帮我吗？

谢谢.

Answer 1

首先,您必须在路线中添加参数.

app.config(function($stateProvider) {    
    $stateProvider
        .state('first', {
            url: '/first',
            templateUrl: 'first.html'
        })
        .state('second', {
            url: '/second/:id',
            templateUrl: 'second.html'
        })
});

现在添加第一个控制器

app.controller.('firstCtrl' ,["$scope", "$state", function($scope, $state){
    $scope.userInput <- come from user
    $scope.clickThis=function() {
        $state.go("second", { id: $scope.userInput });
    }

}]);

在第二个控制器注入$ stateParams

//my second.html
app.controller.('secondCtrl',["$scope", "$state", "$stateParams", function($scope, $state, $stateParams){
    $scope.id = $stateParams.id;
})

Answer 2

你可以在第一个控制器中这样做: -

$state.go("second", {'input' : $scope.userInput});

在第二个控制器中注入$ stateParams服务.

app.controller('secondCtrl',["$scope", "$stateParams", function($scope, $stateParams){
    var data = $stateParams.input;
}]);

并在您的州注册:

  .state('second', {
        url: '/second/:input',
        templateUrl: 'second.html'
    })