지시어를 덜 자세히 만드는 방법은 무엇입니까?

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

모범 사례는 확실하지 않지만 범위에 함수를 추가하고 대신 호출 할 수 있습니다. 그래서, 컨트롤러 :

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

Answer 2

첫째, 당신은 당신의 템플릿에 논리의 대부분을 돌볼 수있는 컨트롤러를 가지고있다. 양식 유효성 검증을 한 후에 $scope.login = function(){ ... }과 같은 것을 선언 한 것으로 보입니다. (단지 짐작).

대신이 방법을 사용하면 제출 버튼에서 호출되는 $scope.processForm = function(){ .. }과 같은 것을 사용하려고합니다. 이 함수는 유효성 검사를 수행하는 validate() 함수를 호출해야하며 성공하면 login() 함수가 호출됩니다.

다음 단계는 service을 구현하는 것입니다. 예를 들어, 귀하의 로그인 컨트롤러뿐만 아니라 유효성 검사를 원하는 모든 컨트롤러 (예를 들어)와 같은 유효성 검사 서비스를 사용할 수 있습니다.

이것은 모든 부울 표현식을 없애고 일반적으로 더 깨끗하고 유지 보수가 용이 한 코드를 제거합니다.