Как получить параметры URL с помощью AngularJS
Исходный код HTML
<div ng-app="">
<div ng-controller="test">
<div ng-address-bar browser="html5"></div>
<br><br>
$location.url() = {{$location.url()}}<br>
$location.search() = {{$location.search('keyword')}}<br>
$location.hash() = {{$location.hash()}}<br>
keyword valus is={{loc}} and ={{loc1}}
</div>
</div>
Исходный код AngularJS
<script>
function test($scope, $location) {
$scope.$location = $location;
$scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
$scope.loc1 = $scope.$location.search().keyword ;
if($location.url().indexOf('keyword') > -1){
$scope.loc= $location.url().split('=')[1];
$scope.loc = $scope.loc.split("#")[0]
}
}
</script>
Здесь переменные loc
и loc1
возвращают тест в качестве результата для вышеуказанного URL. Правильно ли это?
Ответы
Ответ 1
Я знаю, что это старый вопрос, но мне потребовалось некоторое время, чтобы разобраться в этом, учитывая скудную документацию Angular. RouteProvider и routeParams - это путь. Маршрут связывает URL-адрес с вашим контроллером/представлением, и routeParams можно передать в контроллер.
Ознакомьтесь с проектом Angular seed. В app.js вы найдете пример для поставщика маршрутов. Чтобы использовать параметры просто добавьте их так:
$routeProvider.when('/view1/:param1/:param2', {
templateUrl: 'partials/partial1.html',
controller: 'MyCtrl1'
});
Затем в ваш контроллер вставьте $ routeParams:
.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
var param1 = $routeParams.param1;
var param2 = $routeParams.param2;
...
}]);
При таком подходе вы можете использовать params с URL-адресом, таким как: " http://www.example.com/view1/param1/param2 "
Ответ 2
В то время как маршрутизация действительно является хорошим решением для разбора URL-адресов на уровне приложений, вы можете использовать более низкоуровневую службу $location
, которая вводится в ваш собственный сервис или контроллер:
var paramValue = $location.search().myParam;
Этот простой синтаксис будет работать для http://example.com/path?myParam=paramValue
. Однако, только если вы настроили $locationProvider
в режиме HTML 5 до:
$locationProvider.html5Mode(true);
В противном случае посмотрите на синтаксис http://example.com/#!/path?myParam=someValue "Hashbang", который немного сложнее, но имеет преимущество работы с старыми браузерами (не-HTML 5).
Ответ 3
Если вы используете ngRoute, вы можете ввести $routeParams
в свой контроллер
http://docs.angularjs.org/api/ngRoute/service/$routeParams
Если вы используете angular -ui-router, вы можете ввести $stateParams
https://github.com/angular-ui/ui-router/wiki/URL-Routing
Ответ 4
Я нашел решение, как использовать $ location.search(), чтобы получить параметр из URL
сначала в URL нужно поставить синтаксис "#" перед параметром, как в этом примере
"http://www.example.com/page#?key=value"
а затем в вашем контроллере вы помещаете $ location в функцию и используете $ location.search(), чтобы получить параметр URL для
.controller('yourController', ['$scope', function($scope, $location) {
var param1 = $location.search().param1; //Get parameter from URL
}]);
Ответ 5
Если ответы, уже опубликованные, не помогли, можно попробовать
$ Location.search() MyParam.
с URL-адресами http://example.domain#?myParam=paramValue
Ответ 6
function GetURLParameter(parameter) {
var url;
var search;
var parsed;
var count;
var loop;
var searchPhrase;
url = window.location.href;
search = url.indexOf("?");
if (search < 0) {
return "";
}
searchPhrase = parameter + "=";
parsed = url.substr(search+1).split("&");
count = parsed.length;
for(loop=0;loop<count;loop++) {
if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
return decodeURI(parsed[loop].substr(searchPhrase.length));
}
}
return "";
}
Ответ 7
Простой и простой способ получить значение URL
First add # to url (e:g - test.html#key=value)
url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)
var url = window.location.href
(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")
url.split('=').pop()
output "stackoverflow"
Ответ 8
При использовании angularjs с экспрессом
В моем примере я использовал angularjs с экспресс-маршрутизацией, поэтому использование $ routeParams могло бы испортить мою маршрутизацию. Я использовал следующий код, чтобы получить то, что я ожидал:
const getParameters = (temp, path) => {
const parameters = {};
const tempParts = temp.split('/');
const pathParts = path.split('/');
for (let i = 0; i < tempParts.length; i++) {
const element = tempParts[i];
if(element.startsWith(':')) {
const key = element.substring(1,element.length);
parameters[key] = pathParts[i];
}
}
return parameters;
};
Это получает шаблон URL и путь к указанному местоположению. Я просто называю это с:
const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path());
Собрав все воедино, мой контроллер:
.controller('TestController', ['$scope', function($scope, $window) {
const getParameters = (temp, path) => {
const parameters = {};
const tempParts = temp.split('/');
const pathParts = path.split('/');
for (let i = 0; i < tempParts.length; i++) {
const element = tempParts[i];
if(element.startsWith(':')) {
const key = element.substring(1,element.length);
parameters[key] = pathParts[i];
}
}
return parameters;
};
const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);
Результат будет:
{ table: "users", id: "1", place_id: "43", interval: "week" }
Надеюсь, это поможет кому-то там!