Jhipster - 自定义身份验证视图的问题

Question

我正在尝试通过执行以下操作来修改 Jhipster 模板： 如果用户未通过身份验证，则显示身份验证表单（而不是默认设置的身份验证页面链接）。我在 main.html 视图中显示它

<div class="row">
            <div class="col-md-4">
                <span class="hipster img-responsive img-rounded"></span>
            </div>
            <div class="col-md-8">
                <h1 translate="main.title">Welcome, Java Hipster!</h1>
                <p class="lead" translate="main.subtitle">This is your homepage</p>
                <div ng-switch="authenticated">
                    <div class="alert alert-success" ng-switch-when="true"
                         translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
                        You are logged in as user "Admin".
                    </div>
                    <div ng-switch-when="false">
                        <div class="row">
                        <div class="col-md-4">
                            <h1 translate="login.title">Authentication</h1>

                            <div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
                                <strong>Authentication failed!</strong> Please check your credentials and try again.
                            </div>
                            <form class="form" role="form" ng-submit="login()">
                                <div class="form-group">
                                    <label for="username" translate="global.form.username">Login</label>
                                    <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="username">
                                </div>
                                <div class="form-group">
                                    <label for="password" translate="login.form.password">Password</label>
                                    <input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
                                           ng-model="password">
                                </div>
                                <div class="form-group">
                                    <label for="rememberMe">
                                        {{"login.form.rememberme" | translate}}
                                        <input type="checkbox" class="checkbox inline_class" id="rememberMe"
                                               ng-model="rememberMe" checked>
                                    </label>
                                </div>
                                <button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
                            </form>
                            <p></p>
                            <div class="alert alert-warning" translate="global.messages.info.register">
                                You don't have an account yet? <a href=\"#/register\">Register a new account</a>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>

并修改了apps.js：

.otherwise({
              templateUrl: 'views/main.html',
              controller: 'LoginController',
                 access: {
                    authorizedRoles: [USER_ROLES.all]
                 }
            });

如果我不使用 ng-switch-when="false" 语句，它会起作用。 如果我使用这个语句，$scope.password 和 $scope.login 的值在 LoginController 中是“未定义的”。 当然，如果我只想在用户未通过身份验证时显示身份验证表单，则此语句是强制性的。

我不明白为什么。 如果你能在这方面帮助我，那就太好了。 谢谢。

Answer 1

这是一个 common gotcha 与 ng-switch 和其他创建子作用域的指令。这应该有效：

<div class="row">
        <div class="col-md-4">
            <span class="hipster img-responsive img-rounded"></span>
        </div>
        <div class="col-md-8">
            <h1 translate="main.title">Welcome, Java Hipster!</h1>
            <p class="lead" translate="main.subtitle">This is your homepage</p>
            <div ng-switch="authenticated">
                <div class="alert alert-success" ng-switch-when="true"
                     translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
                    You are logged in as user "Admin".
                </div>
                <div ng-switch-when="false">
                    <div class="row">
                    <div class="col-md-4">
                        <h1 translate="login.title">Authentication</h1>

                        <div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
                            <strong>Authentication failed!</strong> Please check your credentials and try again.
                        </div>
                        <form class="form" role="form" ng-submit="login()">
                            <div class="form-group">
                                <label for="username" translate="global.form.username">Login</label>
                                <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="$parent.username">
                            </div>
                            <div class="form-group">
                                <label for="password" translate="login.form.password">Password</label>
                                <input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
                                       ng-model="$parent.password">
                            </div>
                            <div class="form-group">
                                <label for="rememberMe">
                                    {{"login.form.rememberme" | translate}}
                                    <input type="checkbox" class="checkbox inline_class" id="rememberMe"
                                           ng-model="$parent.rememberMe" checked>
                                </label>
                            </div>
                            <button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
                        </form>
                        <p></p>
                        <div class="alert alert-warning" translate="global.messages.info.register">
                            You don't have an account yet? <a href=\"#/register\">Register a new account</a>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>

您可以将值绑定到对象而不是 $parent，但随后您需要相应地修改 Jhipster 的 LoginController（并确保更新 login.html 或仅为主屏幕创建控制器的变体)