$ location.path не работает

Question

Я работаю над формой angularjs, где мне нужно перейти к другому шаблону при нажатии на тег привязки. ng-click работает, но проблема с $location.path. здесь Главный шаблон

<a href="#" class="forgot-txt" ng-show="loginUser.typeofUser == 'ExternalUser'" ng-click="$event.preventDefault(); ShowForgotPasswordForm()">Forgot Password</a> 

Теперь на его контроллере я упомянул же имя метода

$scope.ShowForgotPasswordForm = function() { 
      $location.path("/forgotpasswordform"); 
     }; 

Теперь основные controllerjs и forgotpasswordform форма оба находятся в одной папке.

Затем я добавил эту форму в директивный файл js, который снова находится в той же папке.

angularFormsApp.directive('forgotpasswordform', 
    function() { 
     var baseurl = window.location.protocol + "//" + window.location.host + "/"; 
     return { 
      restrict: 'E', 
      templateUrl: baseurl + 'app/Login/forgotPasswordForm.html' 
     } 

    }); 

и шаблон забыли пароль, как показано ниже, которая также находится в том же папке

<!--ForgotPassword Form Start--> 
<div class="container-fluid"> 
    <div class="row-fluid"> 
     <form class="form-signin padding mg-tb200" novalidate name="forgotpasswordform" role="form"> 
      <h3 class="line-btm">Forgot Password</h3> 
      <p class="lh20"> 
       Please enter a valid email ID in the text field below, 
if it matches our database, a password reset link 
will be sent on this email ID. 
      </p> 
      <input type="email" class="form-control log-input" placeholder="Email address" required autofocus> 

      <div class="checkbox"> 
       <button class="btn-submit right" type="submit">Submit</button> 
      </div> 
     </form> 
    </div> 
</div> 
<!--ForgotPassword Form End--> 

Но когда я нажимаю на якорной теге его будет функционировать ShowForgotPasswordForm но не плывет в форме.

Answer 1

Используйте window.location.pathname, тогда, если $ location не определено, он должен работать.

Answer 2

Таким образом, есть несколько проблем с вашим кодом.

Во-первых, похоже, что у вас есть концептуальная ошибка, связанная с именем директивы с URL-адресом. Это не тот случай.

Но вы можете связать их с помощью маршрутизатора, такого как Component-Router, uiRouter или ngRouter.

Давайте посмотрим, как это будет выглядеть с помощью uiRouter:

Добавляет изменить ссылку, чтобы использовать uiRouter ссылки на состоянии директивы

<a ui-sref="forgotPassword" 
    class="forgot-txt" 
    ng-show="loginUser.typeofUser == 'ExternalUser'"> 
    Forgot Password 
</a> 

Мы заменим вашу директиву с контроллером. Здесь я не буду включать код.

Теперь мы определим конфигурацию состояния:

forgotPasswordStateConfig.$inject = ['$stateProvider']; 
function forgotPasswordStateConfig($stateProvider) { 

    $stateProvider 
     .state('forgotPassword', { 
      url: 'forgotpassword', 
      templateUrl: 'app/Login/forgotPasswordForm.html', 
      controller: 'ForgotPasswordCtrl as ctrl' 
     }); 
} 

app.config(forgotPasswordStateConig);