사용자 지정 유효성 검사기를 구축하기 위해 지시문을 사용하고 있으며 제대로 작동합니다. 하지만 한 번만 호출되었습니다! 내 "roleItems"가 업데이트되면이 지시문이 다시 호출되지 않았습니다! "roleItems"가 업데이트 될 때마다 어떻게 호출 할 수 있습니까?
다음은 마크 업입니다. 그리고 "비어 있지 않음"은 나의 지시입니다.
<form name="projectEditor">
<ul name="roles" ng-model="project.roleItems" not-empty>
<li ng-repeat="role in project.roleItems"><span>{{role.label}}</span> </li>
<span ng-show="projectEditor.roles.$error.notEmpty">At least one role!</span>
</ul>
</form>
이것은 나의 지시입니다. ng-model "roleItems"가 비어 있는지 확인해야합니다.
angular.module("myApp", []).
directive('notEmpty', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$validators.notEmpty = function (modelValue, viewValue) {
if(!modelValue.length){
return false;
}
return true;
};
}
};
});
Validator의 주된 목적은 사용자 입력이나 모델 변경의 ngModel 값을 확인하는 것이므로 체크 박스 / 텍스트 / 입력 등에 사용되어야합니다. 모든 ng-model의 유효성을 검사 할 수 없습니다. Angular는 ng-model이 감각이 없다는 것을 알기에 충분히 지능적이므로 무시하고 있습니다.
.length 속성을 통해 확인할 수있는 오류 메시지 만 변경하고 싶습니다. 전체 양식을 유효하지 않게 만들고 싶다면 사용자 지정 지시문을 만들어 넣고이 지시문의 유효성 검사기에서 scope.number.length> 0을 확인하는 것이 좋습니다.
기본적으로 지시어 코드를 입력 요소로 조정하고 css 또는 type = hidden을 통해 숨 깁니다. 그러나 ng-model은 바인딩되고 덮어 쓸 수있는 값을 기대하기 때문에 ngModel = "value"를 의미하지 않습니다. .roleItems는 바인딩 할 수 없습니다! 따라서 ng-model = "dummyModel"과 실제 항목을 다른 매개 변수에 넣으십시오.
<input type="hidden" ng-model="dummyIgnoredModel" number="project.roleItems" check-empty>
angular.module("myApp", []).
directive('checkEmpty', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$validators.push(function (modelValue, viewValue) {
if(!scope.number.length){
return false;
}
return true;
});
//now we must "touch" ngModel
scope.$watch(function()
{
return scope.number
}, function()
{
ctrl.$setViewValue(scope.number.length);
});
}
};
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다