哈希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

回答

相關問題