[angularjs] $ 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
. 내가 무엇을 놓치고 있습니까?
시연하기 위해 플렁크를 만들었습니다.
답변
가 아닌 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;
});
전달 된 변수를 사용할 수 있어야합니다!