$ location.path изменяет хэш на% 23 и .hash не работает нормально

Я хочу перенаправить на другую страницу, и фокус должен быть на некотором DIV с id let say 'some-div-id'. Я пробовал следовать

$location.path('/' + $scope.config_path.school + '/' +
 $routeParams.someUrl + '/#some-div-id')

Это работает нормально, но сначала меняет # на% 23 Как

/%23some-div-id #If '#' is not already present in the URL
/%23some-div-id#some-div-id #If '#' is laready present in the URL
/#some-div-id

Я также пробовал следовать

$location.path('/' + $scope.config_path.school + '/' +
 $routeParams.someUrl + '/').hash('some-div-id')

он создает правильный URL-адрес, но не прокручивает вниз до DIV с идентификатором some-div-id

отредактированы

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
 $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
 setTimeout(function() {
 if ($location.hash()) {
 $anchorScroll($location.hash());
 }
 });
 });
})
app.controller('MainCntrl', function($scope, $location, $anchorScroll, $routeParams) {
});

Также я пробовал $location.path и $location.url

5 ответов

Попробуйте использовать $location.url вместо $location.path.

В соответствии с документацией $location.path изменяет только путь, тогда как $location.url изменяет путь, поиск и хэш.

Итак, код будет похож на

$scope.goto = function() {
 $location.url('pageone#one');
};

Где pageone - URL состояния, а #one - идентификатор

Также, чтобы заставить его работать при прямом посещении URL с идентификатором в нем, используйте $anchorScroll. В событии $stateChangeSuccess присутствует проверка погоды $location.hash или нет. Если присутствует, то вызовите $anchorScroll. Код будет выглядеть как

.run(function($rootScope, $location, $anchorScroll,$timeout) {
 $rootScope.$on('$stateChangeSuccess',
 function(event, toState, toParams, fromState, fromParams) {
 $timeout(function() {
 if ($location.hash()) {
 $anchorScroll();
 }
 });
 });
})

Пример - http://plnkr.co/edit/4kJjiMJImNzwLjRriiVR?p=preview (для просмотра изменений в URL-адрес http://run.plnkr.co/plunks/4kJjiMJImNzwLjRriiVR/#/pageone)


Ожидается такое поведение. Angular не позволит второй # в вашем URL по умолчанию, таким образом, каждый # за пределами первого будет экранирован, в результате получится %23, который является escape-символом для #: http://www.w3schools.com/tags/ref_urlencode.asp.

Вы можете попробовать включить html5mode, добавив следующее в блок .config:

$locationProvider.html5Mode({
 enabled: true
});

Если это не решит вашу проблему или вам необходимо поддерживать поддержку IE8, лучшим вариантом будет, вероятно, использовать $anchorScroll().

Здесь документация.

В вашем приложении вы можете передать id div, который вы хотите прокрутить в качестве параметра в своем URL-адресе (используя $routeParams или ui-router $stateParams), а затем вызвать функцию, которая будет прокручиваться до этого div сразу при загрузке страницы, например:

$scope.scrollTo = function(id) {
 $location.hash(id);
 $anchorScroll();
}

Пожалуйста, прочтите также более подробное объяснение того, как использовать $anchorScroll() для вашей конкретной проблемы:

Как обрабатывать привязку привязки привязки в AngularJS

А именно, этот конкретный раздел:

Настройте свою маршрутизацию Angular как обычно, а затем просто добавьте следующий код.

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
 //when the route is changed scroll to the proper element.
 $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
 $location.hash($routeParams.scrollTo);
 $anchorScroll(); 
 });
});

и ваша ссылка будет выглядеть так:

<a href="#/test?scrollTo=foo">Test/Foo</a>


У меня была такая же проблема и раньше, и этот пост помог мне. Пусть надеется, что это поможет вам, если это не даст мне знать, поэтому я могу помочь вам найти другое решение.

Удачи.


В ng-книге есть что-то о знаках %13, заменяющих обычную букву. К сожалению, речь идет о разной теме - речь идет о вызове $http или xhr api через REST, где есть два режима (то же самое было бы здесь) - один нормальный режим и второй JQuery. Оказалось, что jquery добавляет эти знаки %13 к таким вещам, как arr[]=1.

Почему я говорю это? Потому что после решения идут библиотеки и функции, которые поддерживают предельные условия.

Ситуация в вашем вопросе довольно проста. Существует служба определения местоположения $, которая является решением, а URL-адреса создаются с помощью simillary в двух режимах, которые являются hashbang, а не hashbang.

В задаче с параметрами jquery разработчики предоставили библиотеку для обмена стандартными параметрами jquery. В реальной жизни существует много преобразователей, таких как pdf to doc и т.д.

Посмотрите на короткую главу в book.

Утверждается, что в режиме html5 вы не можете иметь два хэша в URL-адресе, но в режиме хеш-бэнга вы можете. Браузер не может знать, какой хэш должен перейти в режим hashbang. Поддержка этого - служба anchorScroll.

Я не проверял, работает ли это в этом случае, но попробуйте настроить ваше приложение с помощью AnchorScrollProvider:

.config(function($anchorScrollProvider){
 $anchorScrollProvider.disableAutoScrolling();
});

Затем, когда я пишу, вы можете добавить службу $anchorService в любое место вашего приложения (особенно в контроллере, привязанном к представлению, содержащему some-div-id div) и вызвать функцию anchorScroll() этой службы в любое выбранное время.

Я не могу проверить это прямо сейчас, так что это теоретический ответ.


$location.path(страница);

просто добавьте зависимость в контроллере ur, добавив $location, Этот метод перенаправляет вас на этот маршрут без каких-либо ошибок.

licensed under cc by-sa 3.0 with attribution.