스타일링을 위해 Bootstrap과 함께 1.2rc3 인 AngularJS의 최신 버전을 사용하고 있으며 다음과 같은 지시문이 있습니다.
angular.module('form.field', [])
.directive('efield', function() {
return {
restrict: 'E',
scope: {
form: '@',
fname: '@',
label: '@'
},
template: "<div data-ng-class=\"{{form}}.{{fname}}.$valid ? 'form-group' : 'form-group has-error'\">" +
"<label class='control-label' for='{{fname}}'>{{label}}</label>" +
"<input type='text' class='form-control' name='{{fname}}' data-ng-required='false' data-ng-model='Form.test'>" +
"</div>"
}
});
html 스 니펫은 다음과 같습니다.
<form name="form" novalidate="novalidate">
<efield form="form" fname="test" label="field"></efield>
</form>
나는 지시문을 사용하여 필드 html과 angular의 유효성 검사 지시문을 래핑하여 상용구 코드를 줄이고 있습니다. 문제는 입력 필드에 data-ng-required = 'false'가 설정되어 있어도 부모 div가 'form-group'대신 'form-group has error'클래스를 얻는다는 것입니다. 내가 여기서 뭘 잘못하고 있니?
지시문에서 만든 격리 된 범위로 인해 문제가 발생합니다. 접근하는 방법에는 여러 가지가 있습니다. 다음은 격리 된 범위를 제거하고 template:function(elem,attrs)대신 사용할 것입니다.
.directive('efield', function () {
return {
restrict: 'E',
template: function (elem, attrs) {
return "<div data-ng-class=\"" + attrs.form + "." + attrs.fname + ".$valid ? 'form-group' : 'form-group has-error'\">" +
"<label class='control-label' for='" + attrs.fname + "'>" + attrs.label + "</label>" +
"<input type='text' class='form-control' name='" + attrs.fname + "' data-ng-required='false' data-ng-model='Form.test'>" +
"</div>"
}
});
이제 범위는 상위 범위의 범위가됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다