2016-12-28 469 views
2

我剛開始使用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"); 

    } 
})(); 

如果我通過瀏覽器的網址直接訪問我的網頁,它工作正常,但是當我使用的錨標記「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

任何幫助,將不勝感激..

+0

恰好發生在你的路線是什麼? – SaiUnique

+0

@sai,請參閱編輯部分 –

+0

您可以啓用'html5Mode(true)'來解決您的問題。 – SaiUnique

回答

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> 
+0

謝謝@federico,這個工程。 –

0

您缺少/在你的HREF

+0

我也試過使用Next位它仍然不起作用 –

0

您需要添加href的

href= "#/password"

+0

@ahmad如果有幫助,請接受讓他人清楚的答案:) – ricky

+0

我也試過Next

+0

我也試過Next它不起作用 –

0

看看這個工程,改變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> 
+0

謝謝@nauman,它的工作原理 –