角度路由不适用于锚点答案

【问题标题】：Angular routing not working on anchors角度路由不适用于锚点
【发布时间】：2016-12-28 09:03:42
【问题描述】：

我刚刚开始使用 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

任何帮助将不胜感激..

【问题讨论】：

您的路线到底发生了什么？
@sai，请看编辑部分
您可以启用html5Mode(true)来解决您的问题。

标签： javascript angularjs frontend angular-routing

【解决方案1】：

您好，请尝试在您的路由定义中执行此操作：

 (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>

【讨论】：

【解决方案2】：

看看这是否有效，更改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>

【讨论】：

【解决方案3】：

你的hrefs中缺少一个/

【讨论】：

我也试过用 Next 位还是不行

【解决方案4】：

你需要像这样添加href

href= "#/password"

【讨论】：

@ahmad 如果有帮助，请接受答案以便让其他人清楚:)
我也试过了下一步还是不行
它重定向了什么网址？