목표

1. type=“email” 으로 하는 validate 외에 api 쪽과 동일한 정규표현식으로 설정하고 싶음
2. directive 형태로 email pattern 검증하기
3. 정규표현식은 factory 에서 가져옴
4. ng-pattern을 사용하여 form valid 값 변경되도록 하기 (ng-invalid class 사용하기 위해)

1. 개발

imezWcm.directive('emailCheck', [ '$compile', 'validatorFactory',
function ($compile, validatorFactory) {
  return {
    restrict: 'A',
    replace: false,
    terminal: true,
    priority: 1000,
    compile: function(element, attrs) {
      // validatorFactory.emailPattern = /^([A-Za-z0-9._-]{1,15})(@{1})([A-Za-z0-9.-]{2,15})$/;
      element.attr("ng-pattern", validatorFactory.emailPattern);
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) {  },
        post: function postLink(scope, iElement, iAttrs, controller) {  
          iElement.removeAttr('email-check');
          $compile(iElement)(scope);
        }
      };
    }
  }
}]);

2. 설명

• Priority

  해당 element에 여려개의 directive를 사용할 때 영향이 있다.
  compile 순서 지정이 필요할 때 사용함.
  priority 값이 높은 것이 먼저 적용된다.

• Terminal

  동일하게 하나의 element에 multi direcive를 적용할 때 관련이 있다.
  terminal = true 인 디렉티브 보다 priority 값이 낮은 디렉티브는 실행되지 않는다.
  같은 priority 인 경우에는, terminal = true 인 디렉티브가 있더라도 모두 실행된다.

• iElement.removeAttr(‘email-check’)

  자기 자신인 디렉티브 제거 하는 이유는
  $compile(iElement)(scope) (해당 디렉티브가 있는 element compile)를 실행할 때
  자신이 또 compile 되는 것을 막기 위함이다.

• $compile(iElement)(scope)

  새로 attribute로 추가한 ng-pattern 을 compile 한다.
  새로 compile 하지 않으면 디렉티브가 발동하지 않는다. 이 경우 html에 text 로만 존재.