web-dev-qa-db-ja.com

UIルーターを使用してangularjsでページをリダイレクトするときにパラメーターを渡す方法は？

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に渡されるパラメーターを取得できないようです。誰かが私についてそれを手伝ってくれる？

ありがとう。

javascriptangularjsangular-ui
14
FlyingCat

まず、ルートにパラメータを追加する必要があります。

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

}]);

2番目のコントローラーで$ stateParamsを注入します

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

あなたは最初のコントローラーでこのようにすることができます：-

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

2番目のコントローラーで $ stateParams サービスを挿入します。

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

それをあなたの州に登録してください：

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

URLにパラメーターを追加する代わりに、別の方法で行うことができます。

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

})

他のすべての変更は、他の回答と同じです。

1
Ethan Kim