Angular 路由不适用于锚点

Question

我刚刚开始使用 Angular。路由不适用于锚标记。我的密码是

    (function(){
    'use strict';
    angular.module("PHC",["ngRoute"])
           .controller("AuthController", AuthController).
         config(function($routeProvider) {
           $routeProvider
          .when("/", {
              templateUrl : "templates/email.html",
              controller : "AuthController"
          })
          .when("/password", {
              templateUrl : "templates/password.html",
              controller : "AuthController"
          })
          .when("/confirm-password", {
              templateUrl : "templates/confirm-password.html",
              controller : "AuthController"
          })
          .when("/name", {
              templateUrl : "templates/name.html",
              controller : "AuthController"
          });
});

    function AuthController(){
        var auth=this;
    console.log("Hello");

    }   
})();

如果我直接通过浏览器 URL 访问我的页面，它工作正常，但是当我使用 'href' 锚标记呈现它们时，它不起作用

<button class="next-step-button mt20"><a href="#password">Next</a></button>
<button class="next-step-button mt20"><a href="#email">Go to email</a></button>

编辑： 当我点击锚点时，它会生成如下 URL： http://localhost:3000/module2-solution/index.html#!/#%2Fpassword

任何帮助将不胜感激..

Answer 1

您的 hrefs 中缺少一个 /

Answer 2

您好，尝试在您的路由定义中这样做：

 (function(){
    'use strict';
    angular.module("PHC",["ngRoute"])
           .controller("AuthController", AuthController).
         config(function($routeProvider,$locationProvider) {


    $routeProvider.otherwise({ redirectTo: "/" });

    $locationProvider.hashPrefix('!');


           $routeProvider
          .when("/", {
              templateUrl : "templates/email.html",
              controller : "AuthController"
          })
          .when("/password", {
              templateUrl : "templates/password.html",
              controller : "AuthController"
          })
          .when("/confirm-password", {
              templateUrl : "templates/confirm-password.html",
              controller : "AuthController"
          })
          .when("/name", {
              templateUrl : "templates/name.html",
              controller : "AuthController"
          });
});

    function AuthController(){
        var auth=this;
    console.log("Hello");

    }   
})();

在你的链接中..

<button class="next-step-button mt20"><a  data-ng-href="#!password">Next</a></button>
<button class="next-step-button mt20"><a  data-ng-href="#!email">Go to email</a></button>

Answer 3

您需要像

这样添加 href

href= "#/password"

Answer 4

看看这是否有效，更改 href 值

<button class="next-step-button mt20"><a  href="#!password">Next</a></button>
<button class="next-step-button mt20"><a  href="#!email">Go to email</a></button>

Angular 路由不适用于锚点

Angular routing not working on anchors

javascript

frontend

angularjs

angular-routing