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");
        };

现在主控制器js和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);

$ location.path不起作用

2 个答案: