javascript - 如何使指令不那么冗长？

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() 函数就会被调用。

下一步将是实现一个服务，例如一个验证服务，它不仅可以被你的登录 Controller 使用，也可以被所有关心验证的 Controller 使用(仅作为一个例子) .

这将摆脱所有的 bool 表达式，并且通常会产生更清晰、更好维护的代码。