[angularjs] require : ‘ngModel’의 의미는 무엇입니까?

Program / 글쓴이

이것은 내 지시문의 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).

예를 들어 ngModelvs ng-modelvs 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'

옵션 :

  1. directiveName

    이 낙타 케이스 이름은 컨트롤러가 어떤 지시문을 가져와야하는지 지정합니다. 따라서 <my-menuitem>지시문이 parent <my-menu>에서 컨트롤러를 찾아야하는 경우 myMenu로 작성합니다.

  2. ^

    기본적으로 Angular는 동일한 요소의 명명 된 지시문에서 컨트롤러를 가져옵니다. 이 선택적 ^기호를 추가 하면 지시문을 찾기 위해 DOM 트리를 살펴 보라고 말합니다. 예를 들어,이 기호를 추가해야합니다. 최종 문자열은입니다 ^myMenu.

  3. ?

    필요한 컨트롤러를 찾을 수없는 경우 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);
        };
    }
  };
});

답변