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'});
}]);

在每个视图中，我都有另一个像training.js这样的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菜单和所有链接时，如何链接到视图/home中的特定ID？< / p>

Answer 1

我认为问题在于您在$routeChangeSuccess和documentation says, this event is中有滚动到该哈希的逻辑：

解决路由依赖关系后广播。 ngView听用于实例化控制器并呈现视图的指令。

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

尝试将该逻辑放在ngView directive的onload事件中。

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

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

1 个答案: