如何使指令減少冗長？

在這裏我有一個登錄字段，密碼，用戶名和登錄按鈕。正如你可以看到它非常詳細。如何使指令減少冗長？

<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

有沒有來縮小在這個例子中的代碼量一個聰明的方式表達？有沒有最佳做法？

來源

2014-10-06 user1506145

你可以創建一個包裝每個表單組功能的指令 – 2014-10-06 20:16:00

@KevinB我怎麼去做這件事，因爲ng-show已經是一個指令了？ – user1506145 2014-10-07 08:36:12

@Yoshi當有幾個不同的消息時，ngMessages是否有用？我只想顯示一條消息。 – user1506145 2014-10-07 08:37:22

我不確定最佳做法，但您可以隨時在範圍上放置一個函數並調用它。因此，在控制器：

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')">

來源

2014-10-06 20:15:53 Fordio

首先，你有你的控制器，以照顧大多數的邏輯在你的模板。在那裏你似乎已經宣佈了一些類似$scope.login = function(){ ... }這是在你做了表單驗證之後調用的。（只是猜測）。

而不是這種方法，我會嘗試使用類似$scope.processForm = function(){ .. }這是你的提交按鈕上調用的東西。這個函數應該調用一個validate()函數來驗證你的東西，如果它成功，你的函數被調用。

下一步將實施一個service，例如一個驗證服務，它不僅可以用於您的登錄控制器，也可以用於所有關心驗證的控制器（僅作爲示例）。

這將擺脫所有的布爾表達式，並在一般情況下更清潔和更好的maintanable代碼。

來源

2014-10-06 20:16:26 lexith

Thx爲您的答案，但爲什麼我想要驗證功能？使用AngularJS的原因是我不需要這個。布爾表達式不用於驗證，它們可以隱藏或顯示數據。 – user1506145 2014-10-07 06:48:34

如何使指令減少冗長？

回答

相關問題