angularjs 폼 비밀번호 검증 커스터마이즈 디렉티브 구현 코드

HTML 코드

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="비밀번호를 입력하세요">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="비밀번호를 다시 입력하세요">
    <span ng-show="form.passwordConfirm.$error.equalTo">비밀번호가 일치하지 않습니다</span>
  </form>

js

angular.module("Valid",[])
.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {
      console.log(scope);//현재 스코프 출력
      console.log(attrs);//현재 태그 속성 목록을 출력
      console.log(ctrl);//현재 ctrl을 출력
      var target = attrs["equalTo"];//사용자 정의 지시 속성 키 값을 가져옵니다
      if (target) {//키가 존재하는지 확인
        scope.$watch(target, function () {//존재하면 시작监听를 그 값에 설정
          ctrl.$validate()//매번 변경될 때마다 수동으로 검증을 호출
        } 
        // 현재 모델 컨트롤러의 부모 컨트롤러 FormController를 가져옵니다
        var targetCtrl = ctrl.$$parentForm[target];//지정된 모델 컨트롤러를 가져옵니다
        console.log(targetCtrl)
        ctrl.$validators.equalTo = function (modelValue, viewVale) {//사용자 정의 검증기 내용
          var targetValue = targetCtrl.$viewValue;//password 입력 값을 가져옵니다
          return targetValue == viewVale;//passwordConfirm 값과 같은지 확인
        }
        ctrl.$formatters.push(function (value) {
          console.log("데이터 형식화 중인 값:\nvalue)
          return value;
        }
        ctrl.$parsers.push(function (value) {
          console.log("데이터 변환 중인 값:\nvalue)
          return value;
        }
      }
    }
  }
}

보여주는 주소:https://tianyouh.github.io/angularPasswordConfirm/