javascript - 从 AngularJS 中的另一个页面链接到 #ID 元素

Question

我已经尝试了这里提供的所有解决方案: How to handle anchor hash linking in AngularJS

但没有一个对我有用。

在我的 header.html我有一个链接:<a id="button" href="#/views/home#page"> Contact</a></li>

到 home.html 中的 ID

当我在 /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"

有人可以解释我应该编辑哪些文件以及如何编辑吗？

编辑:我从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'});
}]);

在每个 View 中我都有另一个 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() {

}]);

基于angular-seed模型配置。

所以，什么时候，我在视野中/faq有部分 header使用菜单和所有链接，我如何链接到 View 中的特定 ID /home ？

Answer 1

我认为问题在于您有逻辑滚动到 $routeChangeSuccess 中的那个散列，并且作为 documentation says, this event is :

Broadcasted after a route dependencies are resolved. ngView listens for the directive to instantiate the controller and render the view.

因此 View 尚未呈现，因此具有该 id 的 DOM 元素尚不存在。

尝试将该逻辑放入 ngView directive 的 onload 事件中相反。

我创建了这个插件:http://plnkr.co/edit/S7bUT8iYY7UEti71X5Z8?p=preview这表明如果您将该逻辑添加到 ngView directive 的 onload 事件中一切正常。