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>

修改当我点击锚点时，它会生成以下网址： http://localhost:3000/module2-solution/index.html#!/#%2Fpassword

任何帮助将不胜感激..

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

Answer 2

你错过了hrefs中的/

Answer 3

您需要添加href，如

＆＃13;

href= "#/password"

＆＃13;

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>

角度路由不适用于锚点

4 个答案: