web-dev-qa-db-fra.com

Comment passer un paramètre quand je redirige la page dans angularjs en utilisant un routeur ui?

J'essaie de transmettre des paramètres via le state.go du routeur ui

Cependant, je ne suis pas sûr de savoir comment passer les paramètres. Voici mes codes

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..
})

Je peux rediriger la page vers second.html mais je n'arrive pas à obtenir le paramètre transmis à secondCtrl. Quelqu'un peut-il m'aider à ce sujet?

Merci.

javascriptangularjsangular-ui
14
FlyingCat

Vous devez d'abord ajouter un paramètre dans route.

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

Maintenant, ajoutez dans le premier contrôleur

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

}]);

Dans le second contrôleur injecter $ stateParams

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

Vous pourriez faire de cette façon dans le premier contrôleur: -

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

Dans le second contrôleur, injectez $ stateParams service.

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

et enregistrez-le dans votre état:

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

Au lieu d'ajouter des paramètres supplémentaires dans l'URL, vous pouvez le faire dans l'autre sens.

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

})

Tous les autres changements seraient les mêmes avec les autres réponses. 

1
Ethan Kim