Що означає вимагати: 'ngModel'?

Це HTML для моєї директиви:

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

У своїй директиві я маю таке:

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

Хтось може сказати мені, яке значення вимагає: 'ngModel'? Я бачу це в багатьох різних директивах. Чи можу я назвати це модальним даними?

Я збентежений, тому що коли я змінюю його на data-modal, я отримую повідомлення від Angular say

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: '='у своєму виді ізоляції; the ngModelControllerнадає вам весь доступ, необхідний для зміни значення.

Нижній приклад на домашній сторінці AngularJS також використовує цю функцію (за винятком використання спеціального контролера, а не ngModel).

Що стосується регістру директиви, наприклад, ngModelvs ng-modelvs data-ng-model: в той час як Angular підтримує використання декількох форм у DOM, коли ви посилаєтесь на директиву за іменем (наприклад, при створенні директиви або використанні require), ви завжди використовуєте lowerCamelCase форма імені.

Як зазначено в документації щодо створення спеціальних директив : (По-перше, на ваше запитання у коментарі)

Чи можу я отримати data-ng-model замість цього?

Відповідь:

Найкраща практика : віддайте перевагу використанню формату, розділеного тире (наприклад, ng-bindдля ngBind). Якщо ви хочете використовувати інструмент перевірки HTML, ви можете замість цього використовувати 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установка

(Уривок із книги AngularJS Бреда Гріна та Шяма Сешадрі)

Інші директиви можуть передавати цей контролер їм із синтаксисом властивості require . Повна форма require виглядає так:

require: '^?directiveName'

Варіанти:

1. directiveName

   Це ім’я у верблюдах визначає, з якої директиви повинен походити контролер. Отже, якщо нашій <my-menuitem>директиві потрібно знайти контролер на батьківському рівні <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);                
        };
    }
  };
});