AngularJS 다이나믹 폼 및 지시문

Question

폼의 동적 생성에 문제가 있습니다. 양식 요소에 대해 설정되는 지시문이 있습니다. 그것은 Jquery를 사용하여 id로 요소를 가져옵니다. 그러나 DOM에 아직 추가되지 않은 것 같습니다. 나는 하드 코드 텍스트 필드 및 스팬 요소 검증-메시지를 들어 다음 내가 정의되지 않은 얻고 더 issue.The 영역이 자신없는의 ID 속성은

  <form class="form-horizontal"> 
      <div class="control-group" ng-repeat="field in viewModel.fields"> 
       <label class="control-label">{{field.label}}</label> 
       <div class="controls" ng-switch="field.type"> 
        <input ng-switch-when="text" type="text" id="{{field.label}}" ng-model="field.data" validator="viewModel.validator" ruleSetName="personFirstNameRules"/> 
        <span ng-switch-when="text" validation-Message-For="{{field.label}}"></span> 
       </div> 
      </div> 

      <button ng-click="testID()">Submit</button> 
     </form> 

경우

var errorElementController = angular.element(errorElement).controller('ngModel'); 
    var validatorsController = angular.element(errorElement).controller('validator'); 

전체 지침은 여기

(function (angular, $) { 

angular.module('directivesModule') 
     .directive('validationMessageFor', [function() { 
      return { 
       link: function (scope, element, attributes) { 
        var errorElementId = attributes.validationMessageFor; 
        if (!errorElementId) { 
         return; 
        } 
        var areCustomErrorsWatched = false; 

        var watchRuleChange = function (validationInfo, rule) { 
         scope.$watch(function() { 
          return validationInfo.validator.ruleSetHasErrors(validationInfo.ruleSetName, rule.errorCode); 
         }, showErrorInfoIfNeeded); 
        }; 

        var watchCustomErrors = function (validationInfo) { 
         if (!areCustomErrorsWatched && validationInfo && validationInfo.validator) { 
          areCustomErrorsWatched = true; 
          var validator = validationInfo.validator; 
          var rules = validator.validationRules[validationInfo.ruleSetName]; 
          for (var i = 0; i < rules.length; i++) { 
           watchRuleChange(validationInfo, rules[i]); 
          } 
         } 
        }; 


        //alert(errorElementId); 

        // get element for which we are showing error information by id 
        var errorElement = $("#" + errorElementId); 

        console.log(angular.element(errorElement)); 

        var errorElementController = angular.element(errorElement).controller('ngModel'); 
        var validatorsController = angular.element(errorElement).controller('validator'); 

        console.log(errorElementController); 
        console.log(validatorsController); 

        var getValidationInfo = function() { 
         return validatorsController && validatorsController.validationInfoIsDefined() ? validatorsController.validationInfo : null; 
        }; 

        var validationChanged = false; 
        var subscribeToValidationChanged = function() { 
         if (validatorsController.validationInfoIsDefined()) { 
          validatorsController.validationInfo.validator.watchValidationChanged(function() { 
           validationChanged = true; 
           showErrorInfoIfNeeded(); 
          }); 

          // setup a watch on rule errors if it's not already set 
          watchCustomErrors(validatorsController.validationInfo); 
         } 
        }; 

        var getErrorMessage = function (value) { 
         var validationInfo = getValidationInfo(); 
         if (!validationInfo) { 
          return ''; 
         } 

         var errorMessage = ""; 
         var errors = validationInfo.validator.errors[validationInfo.ruleSetName]; 
         var rules = validationInfo.validator.validationRules[validationInfo.ruleSetName]; 

         for (var errorCode in errors) { 
          if (errors[errorCode]) { 
           var errorCodeRule = _.findWhere(rules, { errorCode: errorCode }); 
           if (errorCodeRule) { 
            errorMessage += errorCodeRule.validate(value).errorMessage; 
            break; 
           } 
          } 
         } 

         return errorMessage; 
        }; 

        var showErrorInfoIfNeeded = function() { 
         var validationInfo = getValidationInfo(); 
         if (!validationInfo) { 
          return; 
         } 

         var needsAttention = validatorsController.ruleSetHasErrors() && (errorElementController && errorElementController.$dirty || validationChanged); 
         if (needsAttention) { 
          // compose and show error message 
          var errorMessage = getErrorMessage(element.val()); 

          // set and show error message 
          element.text(errorMessage); 
          element.show(); 
         } else { 
          element.hide(); 
         } 
        }; 

        subscribeToValidationChanged(); 
        if (errorElementController) 
        { 
        scope.$watch(function() { return errorElementController.$dirty; }, showErrorInfoIfNeeded); 
        } 
        scope.$watch(function() { return validatorsController.validationInfoIsDefined(); }, subscribeToValidationChanged()); 
       } 
      }; 
     }]);}) 
    (angular, $); 

콘솔에 오류가

TypeError: Cannot read property 'validationInfoIsDefined' of undefined 
at subscribeToValidationChanged (http://localhost/trax/app/Directives/validationMessage.js:50:52) 
at link (http://localhost/trax/app/Directives/validationMessage.js:103:24) 
at nodeLinkFn (https://code.angularjs.org/1.2.13/angular.js:6271:13) 
at compositeLinkFn (https://code.angularjs.org/1.2.13/angular.js:5682:15) 
at publicLinkFn (https://code.angularjs.org/1.2.13/angular.js:5587:30) 
at boundTranscludeFn (https://code.angularjs.org/1.2.13/angular.js:5701:21) 
at Object.controllersBoundTransclude [as transclude] (https://code.angularjs.org/1.2.13/angular.js:6292:18) 
at https://code.angularjs.org/1.2.13/angular.js:20073:32 
at Array.forEach (native) 
at forEach (https://code.angularjs.org/1.2.13/angular.js:304:11) <span ng-switch-when="text" validation-message-for="{{field.label}}" class="ng-scope"> 

입니다

Answer 1

정의 할 때 낙타의 경우 지시어 이름을 쓰고 있습니다. 각이 경우 - 따라 값

으로이 지침을 읽어

그래서 validation-Message-For는 HTML 코드

<span ng-switch-when="text" validation-message-for="{{field.label}}"></span> 

에서 validation-message-for 수와 input id 속성 값을 할당 유형 변경해야합니다 :

이 id 속성에서 {{}} 제거를

<input ng-switch-when="text" type="text" id="field.label" ng-model="field.data" validator="viewModel.validator" ruleSetName="personFirstNameRules"/> 

업데이트

ng-switch when의 문제. Plunker에서 입력 태그는 입력 필드로 렌더링되지 않습니다.

Be aware that the attribute values to match against cannot be expressions. 
They are interpreted as literal string values to match against. For example, 
ng-switch-when="someVal" will match against the string "someVal" not against the 
value of the expression $scope.someVal. 

이 질문을 참조하십시오. StackOverflow Question

Updated Plunker