Hash URL und AngularJS

Ich benutze angularjs für einen Teil meiner Seite sagen einzelne Komponente, die in vielen Seiten verwendet wird.Jetzt ist mein Problem Hash-URL funktioniert jetzt nicht.Hash URL und AngularJS

Beispiel: Ich habe ein div # hallo in meiner Seite und die URL wird als URL # Hallo.aber es geht nicht zu diesem bestimmten Div nur der Anfang der Seite wird angezeigt. Könnten Sie mir bitte hier helfen?

HINWEIS: Die URL # Hallo ändert sich zu URL/# Hallo. Die Seite kann nicht in eckig geändert werden und nur diese einzelne Komponente Winkel verwenden.

EDIT: Vielen Dank Stephen :) Ja, natürlich müssen wir Routing verwenden. Die Sache ist, nach dem Laden der Seite, wenn wir die URL zurück zu URL ändern # hallo es funktioniert. So ist es möglich tun es in anderer Weise abgesehen von Routing und $angularscroll? (dh) nur aus der Perspektive JS oder jQuery Perspektive?

Quelle

2016-11-24 user7204875

-1

Keine Sorge, wenn url#hello ändert sich zu url/#hello - das ist in Ordnung, es ist wie das angulare Routing-Modul standardmäßig funktioniert. Wenn Sie möchten, dass div#hello angezeigt wird, wenn Sie url/#hello besuchen, müssen Sie eine Inline-Vorlage verwenden, die einfach ein Skript-Tag ist, das HTML enthält. Geben Sie dem Skript-Tag eine id, dann verwenden Sie diese id als templateUrl, wenn Sie die Route konfigurieren.

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('/') 

    })

Sie können auch einen Controller mit Ihrer Inline-Vorlage verwenden - wenn Sie die Route konfigurieren, verwenden Sie einfach die controller-Eigenschaft.

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

app.config(function($routeProvider){ 

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

})

Quelle

2016-11-24 12:28:13

Nun ... das ist ein Stück Code. Ich habe keine Ahnung, wie es mit dem Problem der Verbindung zu einem bestimmten Teil der Seite umgehen soll. Keines der HTML-Elemente hat sogar das Attribut 'id', das das Element identifiziert, mit dem es verknüpft ist. – Quentin

Ok, danke. Ich habe dich missverstanden. Ich denke, ich habe jetzt ein besseres Verständnis. Bitte korrigieren Sie mich, wenn ich falsch liege:

Sie versuchen also im Wesentlichen, einen hello Link zu erstellen, der auf einen Abschnitt innerhalb derselben Seite verweist. Wenn Sie die URL in pageUrl#hello ändern, sollte die Seite zu dem Abschnitt mit der ID hello springen.

Aber das Problem ist, dass seit dem Abschnitt eine AngularJS Komponente hat, die das ngRoute Modul verwendet, die Routing-Funktionalität Ihrer Seite macht zu pageUrl/#hello umleiten, anstatt mit den id='hello' auf den HTML-Abschnitt springen.

Ist das korrekt?

Lösung

Wenn ich Ihr Problem richtig zu verstehen, ist die Lösung zu überprüfen, ob Ihr ng-app='appName' Attribut auf den Tag body ist. Wenn dies der Fall ist, verschieben Sie es nach unten zum übergeordneten Element Ihrer Komponente.

Wenn ein Hash-Link ein Kind des Elements ng-app ist, dann denkt AngularJS, wenn Sie darauf klicken, dass Sie in eine andere Ansicht umleiten möchten. Dies führt dazu, dass der Link Home zu pageUrl#/home umgeleitet wird.

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

<!-- ... -->

Also, wenn Sie den Hash-Link außerhalb des ng-app Element setzen, dann wird es wie erwartet verhalten, wenn Sie darauf klicken.

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

<!-- ... -->

beim Laden der Seite

Wenn Sie die Seite wollen die hello div auf Seite laden springen, dann setzen Sie window.location = '#hello' in Ihrem Controller. Dann, wenn Sie pageUrl#hello besuchen, sollte das hello div anstelle des oberen Rands der Seite erscheinen.

Wenn Sie keinen Controller haben oder keinen verwenden möchten, überprüfen Sie nach dem Laden des Dokuments die Hash-URL und ändern Sie sie programmgesteuert.

$(document).ready(function(){ 

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

    window.location = '#hello'; 

    } 

})

Quelle

2016-11-24 15:42:57

Danke für die suggestion.ng-App ist für das div und nicht für den Körper von HTML gegeben. Aber es funktioniert immer noch nicht beim Laden der Seite – user7204875

Hallo, da. Ok, versuchen Sie es mit window.location = '#hello'. Danach sollte Ihr Hash-Link beim Laden der Seite funktionieren. Ich habe meine Antwort aktualisiert, um zu klären. –

Hash URL und AngularJS

Antwort

Verwandte Themen