Program Tip

AngularJS 용 ui-router로 쿼리 매개 변수를 추출하는 방법은 무엇입니까?

programtip 2020. 11. 29. 12:11
반응형

AngularJS 용 ui-router로 쿼리 매개 변수를 추출하는 방법은 무엇입니까?


AngularJS 용 ui-router사용하여 쿼리 매개 변수를 어떻게 추출 합니까?

AngularJS 자체 $location서비스에서 다음을 수행했습니다.

($ location.search ()). uid

URL에서 매개 변수 uid를 추출합니다. ui-router에 해당하는 코드는 무엇입니까?


쿼리 매개 변수에 바인딩하지 않는 한 (문서 참조) $state또는을 통해 직접 액세스 할 수 없습니다 $stateParams. $location서비스를 이용하십시오 .

편집 :워드 프로세서 , 당신이 캡처 쿼리 매개 변수를 원하는 경우 $stateParams, 당신이를 추가 할 수 있습니다 ?당신에게 url, 그리고로 구분하여 각 쿼리 매개 변수의 이름 &즉, url: "/foo?bar&baz".


URL 라우팅 문서 의 쿼리 매개 변수 섹션을 참조하십시오 .

매개 변수를 '?'뒤에 쿼리 매개 변수로 지정할 수도 있습니다.

url: "/contacts?myParam"
// will match to url of "/contacts?myParam=value"

이 예에서 URL이 /contacts?myParam=value다음 과 같으면 의 값 다음과 $state.params같습니다.

{ myParam: 'value' }

ui-router는 $ location 서비스처럼 URL에서 다른 유형의 매개 변수를 구별하지 않습니다.

컨트롤러에서 $ stateParams 서비스를 사용하여 URL의 모든 다른 유형의 매개 변수에 액세스 할 수 있습니다.

아래는 ui-router wiki의 예입니다.

// Then you navigated your browser to:
'/users/123/details/default/0?from=there&to=here'

// Your $stateParams object would be
{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

따라서 귀하의 경우 uid 매개 변수를 찾으려면 다음을 사용하십시오.

$scope.uid = $stateParams.uid

또한 $ stateProvider에서 쿼리 매개 변수를 정의해야합니다.

state('new-qs', {
  url: '/new?portfolioId&param1&param2',
  templateUrl: 'new.html',
  controller: function($scope, $stateParams) {
     $scope.portfolioId = $stateParams.portfolioId;
     $scope.param1 = $stateParams.param1;
     $scope.param2 = $stateParams.param2;
  }
})

benfoster.io의 설명 대로


$ stateParams에서 가져올 수 있지만이 경우 경로에서도 쿼리 변수를 선언해야합니다.

경로에서 다음과 같이 선언하십시오.

url: '/path?name'

컨트롤러에서 이름을 얻으려면 $ stateParams 주입하고 다음과 같이 사용하십시오.

$stateParams.name


AngularJS 및 ui-router의 최신 버전의 $state경우 매개 변수에 액세스하는 데 사용할 수 있다고 생각합니다 .

$state.params[<PARAMETER_NAME>]

app.js에서 상태를 다음과 같이 정의했습니다.

.state('app.name', {
    url: '/:some_param_id',
    templateUrl: '/templates/home.html'
})

참고 URL : https://stackoverflow.com/questions/19053991/how-to-extract-query-parameters-with-ui-router-for-angularjs

반응형