이것은 내 지시문의 HTML입니다.
<textarea data-modal="modal" data-mydir ng:model="abc"></textarea>
내 지시문에는 다음이 있습니다.
return {
require: 'ngModel',
replace: true,
scope: {
modal: '=modal',
ngModel: '=',
pid: '=pid'
},
누군가가 require : ‘ngModel’의 중요성을 말해 줄 수 있습니까? 나는 이것을 많은 다른 지시에서 본다. 이것을 데이터 모달이라고 부를 수 있습니까?
데이터 모달로 변경하면 Angular에서 다음과 같은 메시지가 표시되기 때문에 혼란 스럽습니다.
Controller 'ngModel', required by directive 'textarea', can't be found!
답변
이 require
명령은 link
함수 의 네 번째 인수로 명명 한 지시문에 대한 컨트롤러를 제공합니다 . (당신이 사용할 수있는 ^
부모 요소의 컨트롤러를 찾기 위해, ?
그것을 선택한다.) 그래서 require: 'ngModel'
당신에게를위한 컨트롤러 제공 ngModel
지침, 입니다ngModelController
.
지시어 컨트롤러는 다른 지시어가 사용할 수있는 API를 제공하도록 작성 될 수 있습니다. 를 사용하면 값 가져 오기 및 설정을 포함하여에 ngModelController
내장 된 특수 기능에 액세스 할 수 있습니다 ngModel
. 다음 예를 고려하십시오.
<input color-picker ng-model="project.color">
app.directive('colorPicker', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.colorPicker({
// initialize the color to the color on the scope
pickerDefault: scope.color,
// update the ngModel whenever we pick a new color
onColorChange: function(id, newValue) {
scope.$apply(function() {
ngModel.$setViewValue(newValue);
});
}
});
// update the color picker whenever the value on the scope changes
ngModel.$render = function() {
element.val(ngModel.$modelValue);
element.change();
};
}
}
});
이 지시문은 ngModel
컨트롤러를 사용하여 색상 선택기에서 색상 값을 가져오고 설정합니다. 이 JSFiddle 예제를 참조하십시오 : http://jsfiddle.net/BinaryMuse/AnMhx/
을 사용하는 경우 격리 범위 에서도 사용 require: 'ngModel'
해서는 안됩니다 . 는 당신에게 당신이 값을 변경하는 데 필요한 모든 액세스 할 수 있습니다.ngModel: '='
ngModelController
AngularJS 홈페이지 의 맨 아래 예제 에서도이 기능을 사용합니다 (사용자 지정 컨트롤러 사용 제외 ngModel
).
예를 들어 ngModel
vs ng-model
vs data-ng-model
: 지시문의 대 / 소문자는 Angular가 DOM에서 여러 형식 사용을 지원하지만, 지시문을 이름으로 참조 할 때 (예 : 지시문을 만들거나를 사용할 때 require
) 항상 lowerCamelCase를 사용합니다. 이름의 형태.
답변
사용자 지정 지시문 만들기 문서에 명시된대로 : (첫 번째로 의견에있는 질문)
data-ng-model
대신 가질 수 있습니까 ?
대답:
모범 사례 : 대시 구분 된 형식 (예 : 사용 안함
ng-bind
를 들어ngBind
). 당신이 HTML 유효성 검사 도구를 사용하려면 대신 사용할 수 있습니다data
(예 : -prefixed 버전data-ng-bind
에 대한ngBind
). 위에 표시된 다른 양식은 레거시 이유로 허용되지만 피하는 것이 좋습니다.
예 :
<my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span>
둘째, 무엇을 ?ngModel
상징합니까?
// Always use along with an ng-model
require: '?ngModel',
지시문을 사용할 때 속성 / 컨트롤러와 함께 사용되도록합니다 ng-model
.
require
설정
( Brad Green & Shyam Seshadri의 AngularJS 책에서 발췌 )
다른 지시문은 require 속성 구문 을 사용 하여이 컨트롤러를 전달할 수 있습니다 . require의 전체 형식은 다음과 같습니다.
require: '^?directiveName'
옵션 :
directiveName
이 낙타 케이스 이름은 컨트롤러가 어떤 지시문을 가져와야하는지 지정합니다. 따라서
<my-menuitem>
지시문이 parent<my-menu>
에서 컨트롤러를 찾아야하는 경우 myMenu로 작성합니다.
^
기본적으로 Angular는 동일한 요소의 명명 된 지시문에서 컨트롤러를 가져옵니다. 이 선택적
^
기호를 추가 하면 지시문을 찾기 위해 DOM 트리를 살펴 보라고 말합니다. 예를 들어,이 기호를 추가해야합니다. 최종 문자열은입니다^myMenu
.
?
필요한 컨트롤러를 찾을 수없는 경우 Angular는 문제에 대해 알려주는 예외를 발생시킵니다.
?
문자열에 기호를 추가하면 이 컨트롤러는 선택 사항이며 찾을 수없는 경우 예외가 발생하지 않아야 함을 나타냅니다. 그럴 것 같지는 않지만<my-menu-item>
s를<mymenu>
컨테이너 없이 사용 하고 싶다면 최종 요구 문자열에 추가 할 수 있습니다?^myMenu
.
답변
require:'ngModel'
하고 require:'^ngModel'
당신이 지시가 바인딩되는 요소 또는 부모 요소에 부착 된 모델을 주입 할 수 있습니다.
기본적으로 범위 옵션을 사용하여 전달하는 대신 링크 / 컴파일 함수에 ngModel을 전달하는 가장 쉬운 방법입니다. ngModel에 액세스하면을 사용하여 값을 변경하고을 사용하여 $setViewValue
더럽거나 깨끗하게 만들고 $formatters
감시자를 적용하는 등의 작업을 수행 할 수 있습니다.
다음은 ngModel을 전달하고 5 초 후에 값을 변경하는 간단한 예제입니다.
데모: http://jsfiddle.net/t2GAS/2/
myApp.directive('myDirective', function($timeout) {
return {
restrict: 'EA',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$render = function() {
$timeout(function() {
ngModel.$setViewValue('StackOverflow');
}, 5000);
};
}
};
});