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

克劳迪(Claudiu Creanga)

我已经尝试过这里介绍的所有解决方案:如何在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"

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

编辑:我从角种子开始

我的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

约瑟夫

我认为问题是您有逻辑来滚动到,$routeChangeSuccess并且如文档所述,此事件是

路由依赖性解决后广播。ngView监听指令以实例化控制器并呈现视图。

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

尝试把这种逻辑在onload该事件ngView指令代替。

我已经创建了这个插件:http : //plnkr.co/edit/S7bUT8iYY7UEti71X5Z8?p=preview ,它显示了如果将逻辑添加到指令onload事件中,则一切正常。ngView

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用jQuery元素链接到另一个页面

来自分类Dev

Fullpage.js 如何链接到另一个带有 <a> 元素的 html 页面

来自分类Dev

验证并链接到另一个页面

来自分类Dev

使用javascript链接到另一个页面

来自分类Dev

如何使div链接到另一个页面?

来自分类Dev

在 onChange 函数中将一个页面链接到另一个页面

来自分类Dev

使一个提交按钮链接到另一个页面

来自分类Dev

将元素从一个分支重新链接到另一个

来自分类Dev

将简单链接链接到另一个页面的选项卡

来自分类Dev

将登录页面上的居中对齐图像链接到另一个页面

来自分类Dev

如何在Grails中从页面链接到另一个页面

来自分类Dev

将登录页面上的居中对齐图像链接到另一个页面

来自分类Dev

发布时将另一个值链接到textarea元素以用作id [PHP]

来自分类Dev

链接到同一页面上的另一个部分

来自分类Dev

将href值从<a>标记链接到另一个html页面

来自分类Dev

jqplot如何使链接到另一个页面的条形图可点击

来自分类Dev

如何从另一个页面链接到特定选项卡(Telerik RadTab)

来自分类Dev

将提交按钮链接到另一个页面

来自分类Dev

使图像叠加层可点击以链接到另一个页面

来自分类Dev

使用Flask链接到网站内的另一个页面

来自分类Dev

将按钮链接到SweetAlert中的另一个页面

来自分类Dev

链接到另一个页面时遇到问题,需要帮助

来自分类Dev

包含书签的innerHTML无法从另一个页面链接到

来自分类Dev

TouchableOpacity链接到另一个页面并传递数据React Native

来自分类Dev

单击帖子时链接到另一个页面php

来自分类Dev

YII-CDetailView:链接到另一个页面

来自分类Dev

显示数据库中的图像并将其链接到另一个页面

来自分类Dev

html链接到页面,但带有另一个图像(可以通过javascript更改)

来自分类Dev

链接到php分页中的另一个页面?

Related 相关文章

  1. 1

    使用jQuery元素链接到另一个页面

  2. 2

    Fullpage.js 如何链接到另一个带有 <a> 元素的 html 页面

  3. 3

    验证并链接到另一个页面

  4. 4

    使用javascript链接到另一个页面

  5. 5

    如何使div链接到另一个页面?

  6. 6

    在 onChange 函数中将一个页面链接到另一个页面

  7. 7

    使一个提交按钮链接到另一个页面

  8. 8

    将元素从一个分支重新链接到另一个

  9. 9

    将简单链接链接到另一个页面的选项卡

  10. 10

    将登录页面上的居中对齐图像链接到另一个页面

  11. 11

    如何在Grails中从页面链接到另一个页面

  12. 12

    将登录页面上的居中对齐图像链接到另一个页面

  13. 13

    发布时将另一个值链接到textarea元素以用作id [PHP]

  14. 14

    链接到同一页面上的另一个部分

  15. 15

    将href值从<a>标记链接到另一个html页面

  16. 16

    jqplot如何使链接到另一个页面的条形图可点击

  17. 17

    如何从另一个页面链接到特定选项卡(Telerik RadTab)

  18. 18

    将提交按钮链接到另一个页面

  19. 19

    使图像叠加层可点击以链接到另一个页面

  20. 20

    使用Flask链接到网站内的另一个页面

  21. 21

    将按钮链接到SweetAlert中的另一个页面

  22. 22

    链接到另一个页面时遇到问题,需要帮助

  23. 23

    包含书签的innerHTML无法从另一个页面链接到

  24. 24

    TouchableOpacity链接到另一个页面并传递数据React Native

  25. 25

    单击帖子时链接到另一个页面php

  26. 26

    YII-CDetailView:链接到另一个页面

  27. 27

    显示数据库中的图像并将其链接到另一个页面

  28. 28

    html链接到页面,但带有另一个图像(可以通过javascript更改)

  29. 29

    链接到php分页中的另一个页面?

热门标签

归档