AngularJS를 사용하여 URL 쿼리 매개 변수의 값을 읽고 싶습니다. 다음 URL로 HTML에 액세스하고 있습니다:
http://127.0.0.1:8080/test.html?target=bob
예상대로 location.search
는 "?target=bob"
입니다.
target*의 값에 액세스하기 위해 웹에 나열된 다양한 예제를 찾았지만 그 중 어느 것도 AngularJS 1.0.0rc10에서 작동하지 않습니다. 특히 다음은 모두 '정의되지 않음'입니다:
$location.search.target
$location.search['target']
$location.search()['target']
누구든지 무엇이 효과가 있는지 아십니까? (컨트롤러에 매개 변수로 $location
을 사용하고 있습니다.)
업데이트:
아래에 해결책을 게시했지만 완전히 만족스럽지는 않습니다.
개발자 가이드: Angular 서비스: $location 사용]1의 문서에는 $location
에 대해 다음과 같이 설명되어 있습니다:
언제 $location을 사용해야 하나요?
애플리케이션이 현재 위치의 변경에 반응해야 할 때마다 URL의 변경에 반응해야 하거나 브라우저에서 현재 URL을 변경하려는 경우.
제 시나리오에서는 쿼리 매개 변수가 있는 외부 웹 페이지에서 페이지를 열 것이므로 현재 URL의 변경 자체에 반응하지 않습니다. 따라서 $location
이 작업에 적합한 도구가 아닐 수도 있습니다(자세한 내용은 아래 답변 참조). 따라서 이 질문의 제목을 "$location을 사용하여 AngularJS에서 쿼리 매개 변수를 읽는 방법"에서 "AngularJS에서 쿼리 매개 변수를 읽는 가장 간결한 방법은 무엇인가요?"로 변경했습니다. 물론 자바 스크립트와 정규식을 사용하여 '위치 검색'을 구문 분석 할 수 있지만, 그렇게 기본적인 것을 위해 그렇게 낮은 수준으로가는 것은 프로그래머의 감성을 상하게합니다.
그래서 : 내 대답보다 $ 위치
를 사용하는 더 좋은 방법이 있습니까, 아니면 간결한 대안이 있습니까?
컨트롤러에 $routeParams(필요 ngRoute)를 삽입할 수 있습니다. 다음은 문서에 있는 예제입니다:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
편집: $location 서비스(ng
에서 사용 가능), 특히 search
메서드를 사용하여 쿼리 매개변수를 가져와 설정할 수도 있습니다: $location.search().
라우트 매개변수는 컨트롤러의 초기 로드 이후에는 유용성이 떨어지며, $location.search()
는 언제든 호출할 수 있습니다.
HTML5 모드로 작동하도록 설정한 것은 좋지만 해시방 모드에서도 작동하도록 설정할 수 있습니다.
간단히 사용할 수 있습니다:
$location.search().target
를 사용하여 &39;target' 검색 매개변수에 액세스할 수 있습니다.
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $location) {
$scope.location = $location;
$scope.$watch('location.search()', function() {
$scope.target = ($location.search()).target;
}, true);
$scope.changeTarget = function(name) {
$location.search('target', name);
}
}
<div ng-controller="MyCtrl">
<a href="#!/test/?target=Bob">Bob</a>
<a href="#!/test/?target=Paul">Paul</a>
<hr/>
URL 'target' param getter: {{target}}<br>
Full url: {{location.absUrl()}}
<hr/>
<button ng-click="changeTarget('Pawel')">target=Pawel</button>
</div>
제 질문에 대한 부분적인 답변을 드리기 위해 HTML5 브라우저용 작업 샘플을 소개합니다:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
핵심은 위와 같이 $locationProvider.html5Mode(true);
를 호출하는 것이었습니다. 이제 http://127.0.0.1:8080/test.html?target=bob
을 열 때 작동합니다. 이전 브라우저에서는 작동하지 않는다는 사실이 마음에 들지 않지만 어쨌든 이 방법을 사용할 수도 있습니다.
구형 브라우저에서 작동하는 다른 대안은 html5mode(true)
호출을 삭제하고 대신 해시+슬래시와 함께 다음 주소를 사용하는 것입니다:
http://127.0.0.1:8080/test.html#/?target=bob
관련 문서는 개발자 가이드: Angular 서비스: $location 사용에 있습니다(구글 검색에서 이 문서를 찾지 못한 것이 이상합니다...).
두 가지 방법을 통해 수행할 수 있습니다.
가장 적절한 해결책은 '$ 라우스파르엄스' 를 사용하여 권장됨 컨트롤러입니다. 필요합니다 '' 모듈에서는 네그로티 설치할 수 있다.
function MyController($scope, $routeParams) {
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
// $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
var search = $routeParams.search;
}
여기에 단서 조항 있습니다. 정보기술 (it) 에서만 작동하며 html5 모드. 기본적으로 사용하지 않는 작동하지 않기 때문에 URL 에 대한 해시보다 ('#') ',' = abc& param2 = 소 소 데프 param1 항목이없습니다 http://localhost/test?
다음과 같은 개체를 반환되기를 로카션.시치 () '' $
{
param1: 'abc',
param2: 'def'
}
단순히 서머리즈.
App 의 경우 외부 링크를 로드되는 URL 로 변경되어 각 습관 탐지합니다 다음 () 이 빈 객체에는 제공하십시오 $ 로이스션.시치 것이다. 이를 해결하기 위해서는 다음과 같은 설정해야 할 수 있는 애플리케이션 구성 (아프자이스)
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
Just a precision 을 엘리스 Whitehead& # 39 의 그 답이 있다. # 39, t (true) ',' $ locationProvider.html5Mode won& 작동합니까 응용 프로그램의 기본 url 을 통해 새로운 버전의 앙굴라이스 지정하지 않고,, '또는' < 기본 href = " " > 태그 '를' 거짓 '설정' 레키르바제 매개변수입니다
[&Solarisdvd doc] (https://docs.angularjs.org/error/ $ 위치 / 노바제):
> 구성할 경우 $ 위치를 html5Mode (흐리스토리오푸쉬국가), 사용할 수 있는 기본 응용 프로그램의 기본 URL 이 < 지정해야 합니다,, href = " " >. 정의를 위해 필요한 것은 기본 태그 태그 또는 구성할 수 있는 개체 레키르바제 거짓값 전달하여 로카시옹프로비더 $ $ locationprovider.html5mode ():
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
가다가 이 도움이 될 수 있습니다
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
($location.search()).target
내가 한 것으로 인해 많은 hba1-spa HTML5Mode 404 오류 문제, 이 경우 $ 로카션.시치 작업하십시오 할 필요는 없습니다. 저의 경우는 내가 내 사이트 url 을 캡처하려면 쿼리 문자열 매개변수입니다 않했노라 관계없이 사용자가 " page"; 처음에는 https://partner. microsoft. 수 있으며, 그 후에는 로그인하십시오 해당 페이지를 전송할 수 있습니다. 그래서 뭐 그냥 그런 걸 파피룬 캡처하기 있는 모든
$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
if (fromState.name === "") {
e.preventDefault();
$rootScope.initialPage = toState.name;
$rootScope.initialParams = toParams;
return;
}
if ($location.search().hasOwnProperty('role')) {
$rootScope.roleParameter = $location.search()['role'];
}
...
}
그러면 나중에 내가 말할 수 있는 로그인 후 국가스고 $ ($ 루츠코프스니시알페이지, $ 루츠코프스니시알파람스)