A HREF в частичных конфликтах страницы с angularJS маршрутизации ($ rotueprovider)

Question

Угловая версия: последние --1.2

Я загрузки мнения в ng-view на основе $routeprovider, я нахожусь в середине разработки приложения, так прямо сейчас я просто указываю URL-адрес в браузере и загружается его соответствующий VIEW.

Проблема У меня есть ссылки на частичных страницах, которые должны прокручивать меня до определенного div, а ссылки создаются с использованием ng-repeat.

Код:

<li ng-repeat = "(key,val) in test.Questions">  
    <a href="#{{key}}" >{{ $index+1}}</a>   
</li> 

Так что, когда я нажимаю на выше сгенерированных связей, URL заменяется ссылкой.

Eaxmple:

http://localhost:8085/Questionarie/#/exam/533135 

является URL, чтобы загрузить VIEW, но его заменили так:

http://localhost:8085/Questionarie/#QS7..... 

вместо этого я хочу что-то вроде этого

http://localhost:8085/Questionarie/#/exam/533135#QS7 

ПРИМЕЧАНИЕ: Я пытался используя $anchorscroll, но он работает только в том случае, если я даю строковый литерал в scrollTO('foo')..., если даю scrollTo({{foo}}).. не работает

Прямо сейчас я не использую какой-либо задний конец, просто разрабатывая интерфейс в локальном хосте. Я видел некоторую информацию о режиме HTML5, но не мог понять, как ее использовать.

Также я планирую использовать NodeJS и выразить в будущем.

ЗАКЛЮЧЕНИЕ Таким образом, проблема связана с внутренними ссылками страниц, противоречащими маршрутизации angularJS, а не только в случае, о котором я упоминал выше, но при использовании вкладок Twitter Bootstrap также заменяется URL.

Answer 1

Не уверен, что это применимо к ngRouter, но я настоятельно рекомендую переключиться на ui-router, который поддерживает вложенные представления, чтобы назвать одну из двух преимуществ.

Шаг 1: Отмените регистрацию службы $ anchorScroll.

angular.module('myapp', [...]).value('$anchorScroll', angular.noop)... 

Шаг 2: Настройка слушателей на $ viewContentLoaded.

myapp.run(['$state', '$stateParams', '$window', function ($state, $stateParams, $window) { 
    $rootScope.$on('$viewContentLoaded', function() { 
    var state = $state.$current; 
    if (state.scrollTo == undefined) { 
     $window.scrollTo(0, 0); 
    } else { 
     var to = 0; 
     if (state.scrollTo.id != undefined) { 
     to = $(state.scrollTo.id).offset().top; 
     } 
     if ($($window).scrollTop() == to) { 
     return; 
     } 
     if (state.scrollTo.animated) { 
     $(document.body).animate({scrollTop:to}); 
     } else { 
     $window.scrollTo(0, to); 
     } 
    } 
    }); 
}]); 

Шаг 3: Настройка ваше состояние (s)

state('applications.details', {   
    ... 
    scrollTo : { id:'#applications-content-anchor', animated: true } 
}). 

Предоставлено gaelduplessix на GitHub.

https://github.com/angular-ui/ui-router/issues/110

Примечание: Я не проверял это сам лично, но общий ответ на вопрос нити было достаточно положительным для меня, чтобы бросить это ваш путь - мы надеемся, это будет все работать.

Удачи.