Ссылка на #ID элемент с другой страницы в AngularJS

Question

Я пытался все решения, представленные здесь: How to handle anchor hash linking in AngularJS

Но никто не работал для меня.

В моей header.html У меня есть ссылка: <a id="button" href="#/views/home#page"> Contact</a></li>

к ID в home.html

Когда я в /home это работает, но когда я нахожусь в другой странице не работает.

Я пробовал использовать ##page без успеха. Или положить это в app.js:

app.run(function($rootScope, $location, $anchorScroll, $routeParams) { 
    $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { 
    $location.hash($routeParams.scrollTo); 
    $anchorScroll(); 
    }); 
}); 

и настраивая мою ссылку:

href="#/views/home/?scrollTo=page" 

Может кто-нибудь объяснить, какие файлы я должен изменить, и как?

Edit: Я начал с Angular-Seed

Мои app.js является:

'use strict'; 

// Declare app level module which depends on views, and components 
angular.module('myApp', [ 
    'ngRoute', 
    'myApp.view1', 
    'myApp.view2', 
    'myApp.training', 
    'myApp.faq', 
    'myApp.media', 
    'myApp.contact', 
    'myApp.home', 
    'myApp.apply', 
    'myApp.classes', 
    'myApp.version' 
]). 
config(['$routeProvider', function($routeProvider) { 
    $routeProvider.otherwise({redirectTo: '/views/home'}); 
}]); 

И в каждом представлении у меня есть еще JS файл, как training.js, который выглядит как:

'use strict'; 

angular.module('myApp.training', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/views/training', { 
    templateUrl: 'views/training/training.html', 
    controller: 'TrainingCtrl' 
    }); 
}]) 

.controller('TrainingCtrl', [function() { 

}]); 

Он настроен на основе модели с угловым посевом.

Итак, когда, я нахожусь /faq, который имеет частичное header с меню и всеми ссылками, как я могу ссылаться на определенный ID в поле зрения /home?

Answer 1

Я думаю, что проблема в том, что у вас есть логика для прокрутки этой хэш в $routeChangeSuccess и как documentation says, this event is:

Распространяйте после того, как маршрут, зависимости разрешаются. ngView прослушивает для директивы о создании экземпляра контроллера и визуализации представления.

Таким образом, представление еще не отображается, поэтому элемент DOM с этим идентификатором еще не существует.

Попробуйте поместить эту логику в событие onload вместо ngView directive.

Я создал этот плункер: http://plnkr.co/edit/S7bUT8iYY7UEti71X5Z8?p=preview, который показывает, что если вы добавите эту логику в событие onloadngView directive, все будет хорошо работать.