Question

这里我有一个登录字段，密码，用户名和登录按钮。你可以看到它非常冗长。

<form name='form' novalidate ng-submit="form.$valid && submit('/login')" ng-focus="showError=false" ng-controller='loginController' >
    <h2>Login</h2>

    <div class="form-group has-feedback" ng-class="{ 'has-error' : ((form.username.$touched || form.$submitted) && form.username.$invalid) || showError}">
        <input ng-focus="showError=false" type="email" name="username" class="form-control" placeholder="Email" ng-model='data.username' ng-disabled="loading" required>
        <span ng-show="((form.username.$touched || form.$submitted)  && form.username.$invalid) || showError" class="glyphicon form-control-feedback glyphicon-remove"></span>
        <p ng-show="(form.username.$touched || form.$submitted)  && form.username.$invalid" class="help-block text-left">Enter a valid email</p> 
    </div>

    <div class="form-group has-feedback" ng-class="{ 'has-error' : ((form.password.$touched || form.$submitted)  && form.password.$invalid) || showError}">
        <input ng-focus="showError=false" type="password" name="password" class="form-control" placeholder="Password" ng-model='data.password' ng-disabled="loading" required>
        <span ng-show="( (form.password.$touched || form.$submitted)  && form.password.$invalid ) || showError" class="glyphicon form-control-feedback glyphicon-remove"></span>
        <p ng-show="(form.password.$touched || form.$submitted)  && form.password.$invalid" class="help-block text-left">Enter a password</p> 
    </div>

    <button type="submit" class="btn btn-primary btn-block" ng-disabled="loading">
     Log in</button>
</form>

我反复使用那种

的表达方式

((form.username.$touched || form.$submitted)  && form.username.$invalid) || showError

在此示例中是否有一种智能方法来缩小代码量？有没有最好的做法？

Answer 1

首先，您可以使用Controller来处理模板中的大部分逻辑。在那里你似乎声明了$scope.login = function(){ ... }之类的东西，在你进行表单验证后调用它。（只是猜测）。

而不是这种方法，我会尝试使用在您的提交按钮上调用的$scope.processForm = function(){ .. }之类的东西。然后，此函数应调用执行验证的validate()函数，如果成功，则调用login()函数。

下一步是实现service，例如验证服务，它不仅可以由您的登录控制器使用，还可以用于所有关心验证的控制器（仅作为示例）。

这将消除所有布尔表达式，并且通常会使用更清晰，更好的可维护代码。

Answer 2

我不确定最佳做法，但你总是可以在范围内放置一个函数并调用它。所以，在控制器中：

scope.showMessage = function (inputName) {
    return ((form.username.$touched || form.$submitted)  && form[inputName].$invalid) || showError;
}

然后从标记中调用，例如：

<div class="form-group has-feedback" ng-class="{ 'has-error' : showMessage('username')">

如何使指令更简洁？

2 个答案: