Неправильное отображение якорей

@Fried_nail · Регистрация: 03.02.2016

Author24 — интернет-сервис помощи студентам

При использовании маршрутизации в angular столкнулся с такой проблемой, когда кликаю по ссылкам с маршрутами типа #/anchor они не срабатывают, потому что в браузерах они кодируются в #!#%2Fanchor. Как это можно исправить? Если я делаю тоже самое, только не используя angular, то все якоря нормально отображаются...
Вот мой пример (angular версии 1.6.0):

HTML5

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Angular Routes Test</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="angular-route.min.js"></script>
</head>
<body ng-controller="testController">
    <a href="#/">Home</a>
    <a href="#/test">Test</a>
    <a href="#/anchor">MoreTest</a>
    <div ng-view></div>
 
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngRoute']);
 
        app.config(function($routeProvider){
            $routeProvider
            .when('/', {
                template: '<h1>Home</h1>'
            })
            .when('/test', {
                template: '<h2>Test</h2>'
            })
            .otherwise({
                redirecTo: '/'
            });
        });
 
        app.controller('testController', function($scope){
        });
    </script>
</body>
</html>

Добавлено через 1 час 38 минут
Точнее такое происходит, когда я подключаю angular-route.min.js к странице

Добавлено через 4 часа 57 минут
Аллилуйя! Решил проблему! Кому будет интересно - вот решение:
Интернет подсказывал, что нужно включить html5Mode

Javascript

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

Но после того, как js выполнял эту функцию у меня напрочь отказывался подключаться модуль ngRoute выдавая ошибку.
В одном из многочисленных постов к этой функции прилагалась ещё

Javascript

1	$locationProvider.hashPrefix('!');

Вместе они тоже не работали Т_Т После этого начал совершать абсолютно рандомные действия, после кучи таких действий в определённый момент убрал html5Mode, оставил функцию $locationProvider.hashPrefix('!') в которой убрал восклицательный знак ииии... Оно заработало, понятия не имею почему, если кто-то знает объясните)
В итоге получился во такой js:

Javascript

var app = angular.module('myApp', ['ngRoute']);
 
        app.config(function($routeProvider, $locationProvider){
            $routeProvider.when('/', {
                template: '<h1>Home</h1>'
            });
            $routeProvider.when('/test', {
                template: '<h2>Test</h2>'
            });
            $routeProvider.when('/route', {
                template: '<h1>MoreTest</h1>'
            });
            /*$routeProvider.otherwise({
                redirectTo: '/'
            });*/
 
            /*$locationProvider.html5mode({
                enabled: true,
                requireBase: true
            });*/
            $locationProvider.hashPrefix('');
        });

@Angry_n_Hungry · 27.12.2016, 06:04

https://docs.angularjs.org/api/ng/service/$anchorScroll

@Angry_n_Hungry 19 / 19 / 12 Регистрация: 03.10.2016 Сообщений: 107
	27.12.2016, 06:04	2
	https://docs.angularjs.org/api/ng/service/$anchorScroll 0