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 =＆＃34; false＆＃34;声明。如果我使用这个语句，$ scope.password和$ scope.login的值是＆＃34; undefined＆＃34;在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或创建一个变体仅限主屏幕的控制器）

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

1 个答案: