programing

require: 'ngModel'의 의미는 무엇입니까?

lastmemo 2023. 3. 2. 21:56
반응형

require: 'ngModel'의 의미는 무엇입니까?

제 지시의 HTML은 다음과 같습니다.

<textarea data-modal="modal" data-mydir ng:model="abc"></textarea>

제 지령에는 다음과 같은 내용이 있습니다.

return {
  require: 'ngModel',
  replace: true,
  scope: {
    modal: '=modal',
    ngModel: '=',
    pid: '=pid'
  }
}

ngModel나는 이것을 많은 다른 방향에서 볼 수 있다.걸걸데 데델 모델 델델 델???

i 요.data-modal say Angular에게 메시지를 .

Controller 'ngModel', required by directive 'textarea', can't be found!

require의 네 합니다.link이렇게 하면.^요소의 합니다.?는 그것을 옵션으로 합니다. ★★★★★★★★★★★★★★★★★.require: 'ngModel', 「」를 .ngModeldirective는 입니다.

디렉티브 는 다른 수 있는API를 할 수 이 경우 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그럼 값을 변경하는 데 필요한 모든 액세스가 제공됩니다.

Angular의 아래쪽 예제JS 홈페이지는 이 기능도 사용합니다(커스텀 컨트롤러를 사용하는 것 제외,ngModel를 참조해 주세요.


는 예를 들어, 예를 들어, 「지시문」, 「지시문」 입니다.ngModel »ng-model »data-ng-modelDOM 에서 여러 하는 것을 디렉티브를 작성하는 경우, 또는 「DOM」을 사용하는 경우, 「Angular」는 「DOM」을 사용합니다).require 하위 로어 Camel Case 로어 Camel Case 로어 Camel Case 로어 Camel Case 로어.

커스텀 디렉티브 작성 매뉴얼에 기재되어 있는 바와 같이 (먼저 코멘트의 질문에 대해)

data-ng-model대??

답은 다음과 같습니다.

베스트 프랙티스: 대시 구분 형식(예:ng-bind★★★★★★에ngBind툴을 는, 대신에 를 할 수 data- 변경 - 버전 변경: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설정

(Angular라는 책에서 발췌Brad Green & Shyam Seshadri의 JS)

다른 디렉티브에서는 require 속성 구문을 사용하여 이 컨트롤러를 전달할 수 있습니다.require의 전체 형식은 다음과 같습니다.

require: '^?directiveName'

옵션:

  1. directiveName

    이 이름은 컨트롤러의 발신원 디렉티브를 지정합니다.그래서 만약 우리가<my-menuitem>디렉티브는 부모 상에서 컨트롤러를 찾아야 합니다.<my-menu>my Menu라고 씁니다.

  2. ^

    기본적으로는 Angular는 동일한 요소의 지정된 지시문에서 컨트롤러를 가져옵니다.옵션 추가^DOM 트리를 걸어 올라가 디렉티브를 찾으라는 기호입니다.들면 이 은 이 기호입니다. 마지막 문자열은 다음과 같습니다.^myMenu.

  3. ?

    필요한 컨트롤러를 찾을 수 없는 경우 Angular는 예외를 발생시켜 문제를 알려줍니다.의 추가?문자열의 기호는 이 컨트롤러가 옵션이며, 발견되지 않을 경우 예외를 발생시키지 않아야 함을 나타냅니다.것 같지 , 가 '우리'를 '우리'로 하고 , '우리'는 '우리'를 '우리'로 하고 싶다.<my-menu-item>는, 「」를 하지 않고 합니다.<mymenu>container,인 "container", "container", "container", "container" 에할 수 .?^myMenu.

require:'ngModel' ★★★★★★★★★★★★★★★★★」require:'^ngModel'지시문이 바인딩된 요소 또는 상위 요소에 연결된 모델을 주입할 수 있습니다.

기본적으로 scope 옵션을 사용하여 ngModel을 전달하지 않고 링크/컴파일 함수에 전달하는 가장 쉬운 방법입니다.에 , ngModel 의 할 수 .$setViewValue, 더러움/깨끗하게 $formatters 등 watchers 「」

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);                
        };
    }
  };
});

언급URL : https://stackoverflow.com/questions/20930592/whats-the-meaning-of-require-ngmodel

반응형