$ state.go toParams 및 $ stateParams를 사용하여 매개 변수를 보내고 검색하는 방법은 무엇입니까?

AngularJS v1.2.0-rc.2를 ui-router v0.2.0과 함께 사용하고 있습니다. 나는 나가를 사용하므로 다른 상태로 리퍼러 상태를 전달하려는 toParams의 $state.go과 같이 :

$state.go('toState', {referer: $state.current.name});

문서 에 따르면 이것은 컨트롤러 $stateParams에 채워 져야 toState하지만 undefined. 내가 무엇을 놓치고 있습니까?

시연하기 위해 플렁크를 만들었습니다.

http://plnkr.co/edit/ywEcG1

가 아닌 URL 상태를 통과 할 경우에, 당신은 사용해서는 안 url최대 당신의 설정시 state. 나는 PR 에서 답 을 찾았고 더 잘 이해하기 위해 주위를 둘러 보았습니다.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

그런 다음 다음과 같이 탐색 할 수 있습니다.

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

또는:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

따라서 HTML에서 :

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

이 사용 사례는 문서에서 완전히 밝혀졌지만 URL을 사용하지 않고 상태를 전환하는 강력한 수단이라고 생각합니다.

Nathan Matthews의 솔루션은 저에게 효과가 없었지만 완전히 정확하지만 해결 방법에 도달 할 이유가 거의 없습니다.

요점은 : 정의 된 매개 변수의 유형과 $ state.go의 toParamas는 상태 전환의 양쪽에서 동일한 배열 또는 객체 여야합니다.

예를 들어 다음과 같이 상태에서 매개 변수를 정의하면 "[]"를 사용하기 때문에 매개 변수가 배열임을 의미합니다.

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      ['index', 'anotherKey'],
    controller:  'overviewController'
})

따라서 다음과 같이 toParams를 배열로 전달해야합니다.

params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)

그리고 $ stateParams를 통해 다음과 같은 배열로 액세스 할 수 있습니다.

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams[0];
    var anotherKey = $stateParams[1];
});

더 나은 솔루션은 양쪽에서 배열 대신 객체를 사용하는 것입니다 .

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      {'index': null, 'anotherKey': null},
    controller:  'overviewController'
})

params 정의에서 []를 {}로 대체했습니다. toParams를 $ state.go에 전달하려면 배열 대신 객체를 사용해야합니다.

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

그러면 $ stateParams를 통해 쉽게 액세스 할 수 있습니다.

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

내가해야 할 일은 URL 상태 정의에 매개 변수를 추가하는 것뿐이었습니다.

url: '/toState?referer'

도!

AngularJS v1.2.0-rc.2와 ui-router v0.2.0으로 작동하는지 확실하지 않습니다. 이 솔루션을 AngularJS v1.3.14에서 ui-router v0.2.13으로 테스트했습니다.

gwhn이 권장하는 것처럼 URL에 매개 변수를 전달할 필요가 없다는 것을 알고 있습니다.

상태 정의에 기본값으로 매개 변수를 추가하기 만하면됩니다. 주에는 여전히 URL 값이있을 수 있습니다.

$stateProvider.state('state1', {
    url : '/url',
    templateUrl : "new.html",
    controller : 'TestController',
    params: {new_param: null}
});

매개 변수를 $state.go()

$state.go('state1',{new_param: "Going places!"});

이 페이지의 이러한 예제 중 어느 것도 나를 위해 일하지 않았습니다. 이것은 내가 사용한 것이고 잘 작동했습니다. 일부 솔루션은 url과 $ state.go ()를 결합 할 수 없다고 말했지만 이것은 사실이 아닙니다. 어색한 점은 URL에 대한 매개 변수를 정의하고 매개 변수도 나열해야한다는 것입니다. 둘 다 있어야합니다. Angular 1.4.8 및 UI 라우터 0.2.15에서 테스트되었습니다.

상태 에서 상태의 끝에 매개 변수를 추가하고 매개 변수를 정의합니다.

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

당신의에서 컨트롤러 당신의 이동 문은 다음과 같이 표시됩니다

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

그런 다음 매개 변수를 꺼내 새 상태의 컨트롤러 에서 사용합니다 ($ stateParams를 컨트롤러 함수에 전달하는 것을 잊지 마십시오).

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!

제 경우에는 여기에 제공된 모든 옵션을 시도했지만 아무도 제대로 작동하지 않았습니다 (angular 1.3.13, ionic 1.0.0, angular-ui-router 0.2.13). 해결책은 다음과 같습니다.

.state('tab.friends', {
      url: '/friends/:param1/:param2',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })

그리고 state.go에서 :

$state.go('tab.friends', {param1 : val1, param2 : val2});

건배

Ionic / Angular의 $ state & $ stateParams와 싸우는 데 많은 시간을 보냈습니다.

$ state.go () 및 $ stateParams를 사용하려면 특정 설정이 있어야하며 다른 매개 변수가 없어야합니다.

내 app.config ()에 $ stateProvider를 포함하고 몇 가지 상태를 정의했습니다.

$stateProvider
    .state('home', {
        templateUrl: 'home',
        controller:  'homeController'
    })
    .state('view', {
        templateUrl: 'overview',
        params:      ['index', 'anotherKey'],
        controller:  'overviewController'
    })

params키는 특히 중요합니다. 또한, 존재하는 url키가 없습니다. stateParams와 URL을 사용하는 것은 혼합되지 않습니다. 서로 배타적입니다.

$ state.go () 호출에서 다음과 같이 정의하십시오.

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

index과 anotherKey그들이 먼저 $ stateController에 나와있는 경우 $ stateParams 변수 만 채워집니다 params정의 키를 누릅니다.

컨트롤러 내에 그림과 같이 $ stateParams를 포함합니다.

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

전달 된 변수를 사용할 수 있어야합니다!

시도 reload: true하시겠습니까?

오랫동안 무슨 일이 벌어지고 있는지 알 수 없었습니다. 내용이 올바르게 작성되었다고 확신하고 동일한 상태를 사용하려면 다음을 시도하십시오 reload: true.

.state('status.item', {
    url: '/:id',
    views: {...}
}

$state.go('status.item', { id: $scope.id }, { reload: true });

이것이 당신의 시간을 절약하기를 바랍니다!

비슷한 문제에 직면했습니다. 나는 많은 인터넷 검색과 시험 및 테스트를 거친 후 작동하는 솔루션으로 끝났습니다. 여기에 당신을 위해 일할 나의 해결책이 있습니다.

두 개의 컨트롤러 -searchBoxController 및 stateResultController 와 searchQuery 라는 매개 변수가 있습니다. 결과가 원격 서버에서 가져 나타내는 도면에 검색 창을 갖는 뷰에서 전달 될 수 있습니다. 방법은 다음과 같습니다.

아래는 다음을 사용하여 다음 뷰를 호출하는 컨트롤러입니다. $state.go()

.controller('searchBoxController', function ($scope, $state) {
        $scope.doSearch = function(){
            var searchInputRaw = $scope.searchQueryInput;
            $state.go('app.searchResults', { searchQuery: searchInput });
        }
    })

다음 $state.go()은가 실행될 때 호출되는 상태입니다 .

.state('app.searchResults', 
            {
                url: '/searchResults',
                views:
                {
                    'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
                },
                params: 
                {
                    'searchQuery': ''
                }
            })

마지막으로 app.searchResults상태 와 관련된 컨트롤러 :

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
        $scope.searchQueryInput = $stateParams.searchQuery;
    });

그리고 내 경우에는 부모 / 자녀 상태입니다. 자식 상태에서 선언 된 모든 매개 변수는 부모 상태에서 알아야합니다.

        .state('full', {
            url: '/full',
            templateUrl: 'js/content/templates/FullReadView.html',
            params: { opmlFeed:null, source:null },
            controller: 'FullReadCtrl'
        })
        .state('full.readFeed', {
            url: '/readFeed',
            views: {
                'full': {
                    templateUrl: 'js/content/templates/ReadFeedView.html',
                    params: { opmlFeed:null, source:null },
                    controller: 'ReadFeedCtrl'
                }
            }
        })

두 개의 매개 변수를 사용하는 상태에 도달 한 솔루션은 변경되었습니다.

.state('somestate', {
  url: '/somestate',
  views: {...}
}

에

.state('somestate', {
  url: '/somestate?id=:&sub=:',
  views: {...}
}

router.js에서 다음을 정의하십시오.

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

컨트롤러에 $ stateParams를 추가해야합니다.

function UserCtrl($stateParams) {
    console.log($stateParams);
}

다음과 같이 매개 변수별로 오브젝트를 보낼 수 있습니다.

$state.go('users', {obj:yourObj});

1 페이지에서 2 페이지로 이동하려고했고 일부 데이터도 전달해야했습니다.

내 router.js 에서 매개 변수 이름 과 나이를 추가했습니다 .

.state('page2', {
          url: '/vehicle/:source',
          params: {name: null, age: null},
.................

에 페이지 1 , 다음 버튼의 onclick을 :

$state.go("page2", {name: 'Ron', age: '20'});

Page2 에서는 다음과 같은 매개 변수에 액세스 할 수 있습니다.

$stateParams.name
$stateParams.age

다음과 같이 전달하려는 쿼리 매개 변수 인 경우 : /toState?referer=current_user

다음과 같이 상태를 설명해야합니다.

$stateProvider.state('toState', {
  url:'toState?referer',
  views:{'...'}
});

출처 : https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters