지시문 내에서 양식에 대한 각도 액세스

Question

드롭 다운 목록에 대한 일부 지시문을 만들려고합니다 : <drop-down-list />.

먼저 각자에게 줄 수있는 방법을 모르겠다. <select>. 다른 답변은 동적으로 컨트롤의 이름을 지정할 수없고 각 <select>을 자체적으로 <form> (또는 ng-form)으로 감쌀 수 있습니다.

내 지침의 $scope에 양식에 대한 액세스 권한이 없으므로 유효성 검사를 수행 할 수 없습니다. 지시문 범위에 형식이 표시되지 않는 이유가 있습니까? 각각 <select>을 자체 양식으로 포장해야합니까?

이

는 템플릿 HTML입니다 :

<div class="row"> 
    <div class="col-md-12"> 
     <form name="formDDL" novalidate> 
      <div class="col-md-6"> 
       <label for="ddl">{{title}}</label> 
      </div> 
      <div class="col-md-6" data-ng-class="getControlStatus(formDDL.ddl)"> 
       <select 
        name="ddl" 
        data-ng-options="i.{{keyField}} as i.{{textField}} for i in itemSource | orderBy: orderBy" 
        data-ng-model="model" 
        data-ng-required="isRequiredCallback" 
        class="form-control"> 
        <option value="">{{defaultText}}</option> 
       </select> 
       <span data-ng-show="hasRequiredError(formDDL.ddl)" class="error">{{getRequiredErrorMessage()}}</span> 
      </div> 
     </form> 
    </div> 
</div> 

그리고이 지시어 코드 :

application.directive('dropDownList', ['baseUrl', function (baseUrl) { 
    return { 
     restrict: 'E', 
     templateUrl: baseUrl + '/Content/templates/dropdownlist.html', 
     transclude: false, 
     replace: true, 
     scope: { 
      title: '@', 
      orderBy: '@', 
      keyField: '@', 
      textField: '@', 
      defaultText: '@', 
      requiredMessage: '@', 
      model: '=', 
      itemSource: '=', 
      isRequired: '=', 
      enableValidation: '=' 
     }, 
     controller: function ($scope) { 
      $scope.isRequiredCallback = getCallback($scope.isRequired, false); 
      $scope.isValidationEnabled = getCallback($scope.enableValidation, false); 

      $scope.getControlStatus = function (control) { 
       if (!$scope.isValidationEnabled() && !control.$dirty) { 
        return {}; 
       } 
       return { 
        'has-success': !control.$error.required, 
        'has-error': control.$error.required 
       } 
      }; 

      $scope.hasRequiredError = function (control) { 
       if (!$scope.isValidationEnabled() && !control.$dirty) { 
        return false; 
       } 
       return control.$error.required; 
      }; 

      $scope.getRequiredErrorMessage = function() { 
       return $scope.requiredMessage; 
      }; 
     } 
    }; 
}]); 

당신은 getCallback 기능을 무시할 수 있습니다 : 그것은 단지 인 바운드 값을 처리하는 부울 또는 함수.

Answer 1

나는 조합이 나왔다.

원래 컨트롤의 이름을 변경할 수 있다고 생각했습니다. 그러나 입력에 동적 이름을 부여 할 수는 없습니다 (Dynamic validation and name in a form with AngularJS).

트릭은 각 컨트롤에 중첩 된 양식 (또는 ng-form)을 지정하고 동일한 이름을 다시 사용하는 것입니다.

글쎄, 크롬이 내 템플릿을 캐싱하고 있었기 때문에 깨진 HTML이 반환되었습니다. Chrome 개발자 도구를 캐시하지 않도록 설정합니다.

다음 문제는 <input>에 ng-model이 있어야 객체 양식 (FormController)으로 표시된다는 것입니다. 논리적 인 의미가 있습니다 : http://docs.angularjs.org/guide/forms#binding-to-form-and-control-state.