サービスを使用して、変更時にng-classを更新する

Question

サービスで任意の入力フィールドを処理できるようにしたいと考えています。現時点で私は手作業ですべてを書いており、多くの手作業になり始めています。要素の変更プロパティが呼び出されたときに要素オブジェクトを送信する方法はありますか？その結果、ng-class要素を変更することができます。

HTML：コントローラで

<input type="text" id="email" data-ng-model="email" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor"> 

：

$scope.changeEmail = function() { 
    if ($checkInput.checkEmail($scope.email)) { 
     // email input is good 
     $scope.emailFormControlColor = 'form-control-success'; // change from error to success 
    } else { 
     // email input is bad 
     if ($scope.emailFormControlColor === 'form-control-success') 
      $scope.emailFormControlColor = 'form-control-error'; // change from success to error 
    } 
}; 

サービス（これはOFCコントローラの引数に含まれている。）：

.service('checkInput', ['$controller', '$window', '$location', function ($controller, $window, $location) { 
    return { 
     checkEmail: function (email) { 
      // <--- I would like to update the ng-class of the focused element here! This would result in me not manually having to write code for each input! 
      var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
      return regex.test(email); 
     } 
    }; 
}]) 

上記のコードはどのようです私は今それを持っています。ご覧のとおり、私は手動で$ scope.emailFormControlColorを変更しています。 、私は私の質問は明らかであると思います

$scope.emailFormControlColor1 = 'form-control-success'; 
$scope.emailFormControlColor2 = 'form-control-success'; 
$scope.emailFormControlColor3 = 'form-control-success'; 

：私は手動で次のように書く必要がないように、私は私のサービスを書くことができる方法

<input type="text" id="email1" data-ng-model="email1" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor1"> 
<input type="text" id="email2" data-ng-model="email2" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor2"> 
<input type="text" id="email3" data-ng-model="email3" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor3"> 

：

は、私は三つの入力フィールドを持っている想像してみてそうでなければ、私はそれを更新します！

Answer 1

をスニルD.が答えに基本的に私を指摘していてもコードが間違っています。以下は、動作させるコードです。http://codepen.io/basickarl/pen/MyoZNB

HTML：

<div ng-app="app" ng-controller="ctrl"> 
    <form name="myForm"> 
    <input ng-model="name" name="name"> 
    <input ng-model="email" name="email" check-email> 
    </form> 
</div> 

CSS：

input { 
    border: 5px; 
    border-style: solid; 
    border-color: silver; 
} 
.input-invalid { 
    border-color: red; 
} 
.input-valid { 
    border-color: lime; 
} 

JS：

var app = angular.module('app', []); 
app.controller('ctrl', ['$scope', function($scope) { 
    $scope.name = ""; 
    $scope.email = ""; 
}]); 
app.directive('checkEmail', [function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, el, attr, ctrl) { 
     ctrl.$validators.checkEmail = function(modelVal, viewVal) { 
     var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
     var isValid = regex.test(viewVal); 
     el.toggleClass('input-valid', isValid); 
     el.toggleClass('input-invalid', !isValid); 
     return isValid; 
     } 
    } 
    } 
}]); 

Answer 2

それぞれのメールに必要なすべての情報を含むオブジェクトを作成します。このような何か：

HTML：

<input type="text" id="email0" data-ng-model="emails[0].value" data-ng-change="changeEmail(emails[0])" placeholder="your email here" data-ng-class="emails[0].class"> 
<input type="text" id="email1" data-ng-model="emails[1].value" data-ng-change="changeEmail(emails[1])" placeholder="your email here" data-ng-class="emails[1].class"> 
<input type="text" id="email2" data-ng-model="emails[2].value" data-ng-change="changeEmail(emails[2])" placeholder="your email here" data-ng-class="emails[2].class"> 

はJavaScript：

$scope.emails = [ 
    { value: '', class: '' }, 
    { value: '', class: '' }, 
    { value: '', class: '' }, 
]; 

$scope.changeEmail = function (email) { 
    if ($checkInput.checkEmail(email)) { 
     // email input is good 
     email.class = 'form-control-success'; // change from error to success 
    } else { 
     // email input is bad 
     if (email.class === 'form-control-success') { 
      email.class = 'form-control-error'; // change from success to error 
     } 
    } 
}; 

適切な場合は、HTMLでのコピー/貼り付けを回避するためにng-repeatのようなものを使用することができます。

Answer 3

私はこの問題を解決するための指示を使用する方が望ましいと思います。 1つは、コントローラーやサービス内のDOMを修正するための反パターンと考えられます。

ディレクティブを使用すると、そのディレクティブが使用されたDOM要素が提供されることになります。ここでは、出発点として使用する可能性がありますいくつかのテストされていないコードがあります：

myModule.directive('checkEmail', function() { 
    require: 'ngModel', 
    link: function(scope, element, attributes, ngModelController) { 
    // require that ng-model is used on this element, so you can hook 
    // into the Angular validator pipeline ... 
    ngModelController.validators.checkEmail = function(modelValue, viewValue) { 
     // now return true or false if viewValue is considered valid 
     var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
     var isValid = regex.test(viewValue); 
     // but you also have an opportunity to do your DOM manipulation 
     element.toggleClass('form-control-success', isValid); 
     element.toggleClass('form-control-error', !isValid); 
     return isValid; 
    }); 
    } 
}); 

の代わりに、上記のようにCSSクラスを適用し、あなただけの検証システムに組み込まれた角度のを使用することができます。ディレクティブコードは、ディレクティブにCSSクラスを適用しないことを除いて、上記と同じです。ディレクティブでの検証コードがfalseを返した場合、角度は、フィールドが無効になります...そして、あなたのHTMLにCSSを適用するには、この事実を使用することができます。

<form name="myForm"> 
    <input ng-model="whatever" 
     name="email" 
     check-email 
     ng-class="{'form-control-success': myForm.email.$valid, 'form-control-error': myForm.email.$invalid}"> 
</form> 

上記のフィールドが無効であるCSSをいつでも適用されますしかし、具体的な検証エラーが発生したときに、これは我々がバリ「のcheckEmailを」という名前の同棲であなたも、それを適用することができますので、これも動作します：

<form name="myForm"> 
    <input ng-model="whatever" 
     name="email" 
     check-email 
     ng-class="{'form-control-success': !myForm.email.$error.checkEmail, 'form-control-error': myForm.email.$error.checkEmail}"> 
</form>