지시문에 양식 전달
양식 필드를 명령어로 캡슐화하면 다음과 같이 간단하게 수행할 수 있습니다.
<div ng-form='myForm'>
<my-input name='Email' type='email' label='Email Address' placeholder="Enter email" ng-model='model.email' required='false'></my-input>
</div>
에 접속하려면myForm예를 들어 유효성 검사를 수행할 수 있도록 지시합니다.myForm.Email.$valid?
명령어로 FormController에 액세스하려면 다음 절차를 수행합니다.
require: '^form',
다음으로 링크 함수의 네 번째 인수로 사용할 수 있습니다.
link: function(scope, element, attrs, formCtrl) {
console.log(formCtrl);
}
NgModelController에 대한 접근만 필요할 수 있습니다.
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
console.log(ngModelCtrl);
}
양쪽 모두에 액세스 할 필요가 있는 경우:
require: ['^form','ngModel'],
link: function(scope, element, attrs, ctrls) {
console.log(ctrls);
}
다음으로 완전한 예를 제시하겠습니다(부트스트랩 3.1을 사용하여 스타일링).
여기에는 여러 입력(이름, 이메일, 나이 및 국가)이 포함된 양식이 포함되어 있습니다.이름, 이메일 및 나이는 지시사항입니다.국가는 "정규" 입력입니다.
사용자가 올바른 값을 입력하지 않으면 각 입력에 대해 도움말메시지가 표시됩니다.
양식에는 저장 버튼이 포함되어 있습니다.이 버튼은 양식에 오류가 하나 이상 포함된 경우 비활성화됩니다.
<!-- index.html -->
<body ng-controller="AppCtrl">
<script>
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
$scope.person = {};
});
</script>
<script src="inputName.js"></script>
<script src="InputNameCtrl.js"></script>
<!-- ... -->
<form name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<input-name ng-model='person.name' required></input-name>
</div>
<!-- ... -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button class="btn btn-primary" ng-disabled="myForm.$invalid">
<span class="glyphicon glyphicon-cloud-upload"></span> Save
</button>
</div>
</div>
</form>
Person: <pre>{{person | json}}</pre>
Form $error: <pre>{{myForm.$error | json}}</pre>
<p>Is the form valid?: {{myForm.$valid}}</p>
<p>Is name valid?: {{myForm.name.$valid}}</p>
</body>
// inputName.js
app.directive('inputName', function() {
return {
restrict: 'E',
templateUrl: 'input-name.html',
replace: false,
controller: 'InputNameCtrl',
require: ['^form', 'ngModel'],
// See Isolating the Scope of a Directive http://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive
scope: {},
link: function(scope, element, attrs, ctrls) {
scope.form = ctrls[0];
var ngModel = ctrls[1];
if (attrs.required !== undefined) {
// If attribute required exists
// ng-required takes a boolean
scope.required = true;
}
scope.$watch('name', function() {
ngModel.$setViewValue(scope.name);
});
}
};
});
// inputNameCtrl
app.controller('InputNameCtrl', ['$scope', function($scope) {
}]);
편집 2: 다른 이유로 도움이 될 수 있으므로 답변을 남겨두겠습니다만, Mark Rajcok의 다른 답변은 제가 원래 하고 싶었지만, 일을 시작할 수 없었습니다.여기 부모 컨트롤러는form,것은 아니다.ngForm.
지시문의 속성을 사용하여 전달할 수 있지만, 다소 상세하게 설명됩니다.
예
여기 작업하는 단순화된 jsFiddle이 있습니다.
코드
HTML:
<div ng-form="myForm">
<my-input form="myForm"></my-input>
</div>
지침의 중요한 부분:
app.directive('myInput', function() {
return {
scope: {
form: '='
},
link: function(scope, element, attrs) {
console.log(scope.form);
}
};
});
무슨 일이야?
Angular에 대해 에 지정된 스코프 값을 바인딩하도록 요청했습니다.form우리의 고립된 범위에 기인한다.'='.
이렇게 하면 실제 형태가 입력 지시에서 분리됩니다.
주의: 다음을 사용해 보았습니다.require: "^ngForm"단, ngForm 디렉티브에서는 컨트롤러가 정의되어 있지 않기 때문에 그러한 방법으로 사용할 수 없습니다(안타깝습니다).
어쨌든, 이것은 매우 장황하고 지저분한 대처법이라고 생각합니다.폼 요소에 새 디렉티브를 추가하여require액세스 할 수 있습니다.제가 뭔가를 만들 수 있는지 알아보겠습니다.
편집: 상위 지시문 사용
자, 다음은 상위 지시어를 사용하여 알 수 있는 최선의 방법입니다. 자세한 내용은 잠시 후에 설명하겠습니다.
상위 지시어를 사용한 jsFiddle 작업
HTML:
<div ng-app="myApp">
<div ng-form="theForm">
<my-form form="theForm">
<my-input></my-input>
</my-form>
</div>
</div>
JS(부분):
app.directive('myForm', function() {
return {
restrict: 'E',
scope: {
form: '='
},
controller: ['$scope', function($scope) {
this.getForm = function() {
return $scope.form;
}
}]
}
});
app.directive('myInput', function() {
return {
require: '^myForm',
link: function(scope, element, attrs, myForm) {
console.log(myForm.getForm());
}
};
});
부모 디렉티브스코프에 폼이 저장됩니다(myForm부모 폼을 요구함으로써 자녀 디렉터가 액세스 할 수 있도록 합니다(require: '^myForm'링크 기능에서 디렉티브의 컨트롤러에 액세스 합니다(myForm.getForm()를 참조해 주세요.
이점:
- 양식을 한 곳에서만 식별하면 됩니다.
- 부모 컨트롤러를 사용하여 공통 코드를 저장할 수 있습니다.
부정:
- 추가 노드가 필요합니다.
- 양식 이름을 두 번 입력해야 합니다.
내가 원하는 것
폼 요소의 속성을 사용하여 작업을 수행하려고 했습니다.이 작업이 성공했을 경우 명령어를 다음과 같은 요소에 추가하면 됩니다.ngForm.
스코프에서 「 」의 「 」를 사용하고 있었습니다.myFormName는 변수표표 variable variable variable variable variable variable variable variable variable에 표시됩니다.$scope단, ,이 됩니다.undefined 좀요.그것은 나를 혼란스럽게 한다.
AngularJS.5(AngularJS 1.5.0을 ) 더.link직접 기능합니다).「」에 하고 .FormController 「CHANGE」를 탭 할 수 .require다음과 같이 명령어로 속성을 지정합니다.
return {
restrict : 'EA',
require : {
form : '^'
},
controller : MyDirectiveController,
controllerAs : 'vm',
bindToController : true,
...
};
다음으로 템플릿 또는 디렉티브컨트롤러에서 다른 스코프 변수와 같이 액세스 할 수 있습니다.예를 들어 다음과 같습니다.
function MyDirectiveController() {
var vm = this;
console.log('Is the form valid? - %s', vm.form.$valid);
}
하려면 , 「」도 합니다.bindToController: trueAtribute를 지정합니다.다음의 메뉴얼을 참조해 주세요.$compile자세한 내용은 이 질문을 참조하십시오.
문서의 관련 부품:
요구하다
다른 디렉티브를 요구하여 링크 함수의 네 번째 인수로 해당 컨트롤러를 주입합니다.필수 속성은 문자열, 배열 또는 개체일 수 있습니다.
require 속성이 오브젝트이고
bindToController트러티하다필요한 컨트롤러는 require 속성의 키를 사용하여 컨트롤러에 바인드됩니다.필요한 컨트롤러의 이름이 로컬 이름(키)과 같을 경우 이름을 생략할 수 있습니다.를 들어, 「」라고 하는 것은,{parentDir: '^parentDir'}{parentDir: '^'}.
'내가 원하는 것' 바이올린을 작동시켰어!어떤 이유로 console.log에 "$scope.ngForm" 문자열이 표시될 수 있지만 직접 로깅이 작동하지 않아 정의되지 않았습니다.단, 컨트롤러 함수에 Atribut을 전달하면 얻을 수 있습니다.
app.directive('myForm', function() {
return {
restrict: 'A',
controller: ['$scope','$element','$attrs', function($scope,$element,$attrs) {
this.getForm = function() {
return $scope[$attrs['ngForm']];
}
}]
}
});
언급URL : https://stackoverflow.com/questions/17618318/pass-form-to-directive
'programing' 카테고리의 다른 글
| 필드에 문자열이 포함되어 있는지 확인 (0) | 2023.03.03 |
|---|---|
| mongo - 서버 127.0.0.1에 접속할 수 없음:127.0.17 (0) | 2023.03.03 |
| TypeScript의 인터페이스 및 클래스 코딩 가이드라인에 대해 혼란 (0) | 2023.03.03 |
| Woocommerce - 제품 단일 페이지에서 SKU 가져오기 (0) | 2023.03.03 |
| 제품 ID별로 woocommerce 리뷰를 받아 템플릿으로 표시하고 싶다. (0) | 2023.03.03 |