哈希URL和AngularJS

我使用angularjs作为我的页面的一部分说单个组件，这是用在许多pages.Now我的问题是散列URL现在不工作。哈希URL和AngularJS

例如：我在我的页面中有一个div＃hello，URL是Url＃hello.but，但它不会转到特定的div，只是显示页面的顶部。所以你们可以帮我在这里吗？

注意：网址＃你好是改变为网址/＃你好。页面不能改变为角度，只有该单一组件使用角度。

编辑：谢谢斯蒂芬:)是的，当然，我们需要使用路由。事情是，页面加载后，如果我们将URL更改回URL＃hello它的作品。所以有可能除了Routing和$angularscroll？（即）从JS或jQuery的角度来看，以其他方式执行？

来源

2016-11-24 user7204875

-1

当url#hello更改为url/#hello时，请不要担心 - 这没关系，这是默认情况下Angular路由模块的工作原理。如果您要访问url/#hello时要显示div#hello，则必须使用内联模板，该模板只是包含html的脚本标记。给脚本标记id，然后在配置路由时使用此id作为templateUrl。

app.html

<body ng-app="demoApp"> 

    <div ng-view> 
     <!-- leave this empty, 
      your inline templates display here 
      when the url changes--> 
    </div> 

    <!-- inline templates --> 

    <script type="text/ng-template" id="hello.html"> 
     <div> 
     <p>Hello</p> 
     </div> 
    </script> 

    <script type="text/ng-template" id="home.html"> 
     <div> 
     <p>Home</p> 
     </div> 
    </script> 

    </body> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

    <!-- reference 'angular-route.js' 
     so that routing works --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> 

    <!-- include your app script file last --> 
    <script src="app.js"></script>

app.js

// include ngRoute module 
var app = angular.module('demoApp', ['ngRoute']); 

app.config(function($routeProvider){ 

    // link each inline template to a url 

    $routeProvider. 
      when('/', { // url/# - (url#) 
       templateUrl: 'home.html' 
      }, 
      when('/hello', { // url/#/hello - (url#hello) 
       templateUrl: 'hello.html' 
      }). 
      otherwise('/') 

    })

您也可以使用带内联模板的控制器 - 当您配置路线时只需使用controller属性。

app.controller('helloCtrl', function($scope){ /* ... */ }) 

app.config(function($routeProvider){ 

    $routeProvider. 
    when('/hello', { 
     templateUrl: 'hello.html', 
     controller: 'helloCtrl' 
    }) 

})

来源

2016-11-24 12:28:13

嗯...这是一个代码块。我不知道它应该如何处理链接到页面特定部分的问题。 HTML元素甚至没有标识要链接元素的'id'属性。 – Quentin

好的，谢谢。我误解了你。我想我现在有一个更好的理解。请纠正我，如果我错了：

所以，你基本上试图做一个hello链接指向同一页面内的一节。当您将网址更改为pageUrl#hello时，该页面应跳转至ID为hello的部分。

但问题是，既然你的部分有一个使用ngRoute模块的AngularJS组件，该路由功能使您的页面重定向到pageUrl/#hello，而不是跳跃与012的HTML部分。

这是正确的吗？

解决方案

如果我正确理解你的问题，解决的办法是检查你的ng-app='appName'属性是在body标签。如果是，则将其下移到组件的父元素。

如果散列链接是ng-app元素的子元素，那么当您单击它时，AngularJS会认为您要重定向到另一个视图。这是导致Home链接重定向到pageUrl#/home的原因。

<body ng-app="demoApp"> 
    <a href="#hello">Hello</a> <!-- redirects to #/hello --> 
    <div id="hello"></div> 

<!-- ... -->

所以，如果你把散列链接ng-app元素之外，那么它的行为，当你点击它的预期。

<body> 
    <a href="#hello">Hello</a> <!-- jumps to the 'hello' div --> 
    <div id="hello" ng-app="demoApp"></div> 

<!-- ... -->

在页面加载

如果你想在页面跳转到hello格在页面加载，那么你的控制器内设置window.location = '#hello'。然后，当您访问pageUrl#hello时，应出现hello div而不是页面的顶部。

如果您没有控制器，或者不想使用控制器，那么在文档加载后，请检查哈希URL并以编程方式进行更改。

$(document).ready(function(){ 

    if(window.location.hash == '#hello'){ 

    window.location = '#hello'; 

    } 

})

来源

2016-11-24 15:42:57

谢谢你的建议.ng-app是给div的，而不是html的body。但是它在页面加载时不起作用 – user7204875

嗨，那里。好吧，试试设置window.location ='#hello'。之后，你的哈希链接应该在页面加载时工作。我已经更新了我的答案以澄清。 –

哈希URL和AngularJS

回答

相关问题