Використання символів '@', '&', '=' і '>' у прив'язці до власної директиви: AngularJS

Я багато читав про використання цих символів для реалізації користувацьких директив в AngularJS, але ця концепція мені ще не зрозуміла. Я маю на увазі, що це означає, якщо я використовую одне із значень області в користувацькій директиві?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

Що саме ми робимо зі сферою дії тут?

Я також не впевнений, чи існує "range: '>" " в офіційній документації чи ні. Це було використано в моєму проекті.

Правка-1

Використання "obseg: '>" " було проблемою в моєму проекті, і це було виправлено.

У директиві AngularJS область дозволяє вам отримати доступ до даних в атрибутах елемента, до якого застосовується директива.

Це найкраще проілюстровано на прикладі:

<div my-customer name="Customer XYZ"></div>

та визначення директиви:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

Коли використовується scopeвластивість, директива перебуває у так званому режимі "ізольованої області", тобто вона не може безпосередньо отримати доступ до області батьківського контролера.

Дуже просто кажучи, значення символів, що зв'язують:

someObject: '=' (двостороння прив'язка даних)

someString: '@'(передається безпосередньо або через інтерполяцію з подвійними фігурними позначками дужок {{}})

someExpression: '&'(наприклад hideDialog())

Ця інформація присутня на сторінці документації з директивою AngularJS , хоча дещо поширюється на всій сторінці.

Символ >не є частиною синтаксису.

Однак <існує як частина прив'язки компонента AngularJS і означає однобічне зв'язування.

> немає в документації.

< призначений для одностороннього зв’язування.

@прив'язка призначена для проходження рядків. Ці рядки підтримують {{}}вирази для інтерпольованих значень.

=прив’язка призначена для двосторонньої прив'язки моделі. Модель в батьківській області пов'язана з моделлю в ізольованій області директиви.

& прив'язка - це передача методу в область вашої директиви, щоб його можна було викликати у вашій директиві.

Коли ми встановлюємо область: true в директиві, Angular js створить нову область для цієї директиви. Це означає, що будь-які зміни, внесені в область застосування директиви, не відображатимуться в батьківському контролері.

< одностороння зв'язування

= двостороння зв'язування

& функція зв'язування

@ проходять лише рядки

Коли ми створюємо директиву щодо замовника, сфера дії цієї директиви може бути в ізольованому масштабі, це означає, що директива не ділиться сферою застосування з контролером; і директива, і контролер мають власну сферу застосування. Однак дані можуть бути передані в область директиви трьома можливими способами.

1. Дані можуть передаватися у вигляді рядка, використовуючи @літеральний рядок, значення рядка передачі, одностороннє прив'язування.
2. Дані можуть передаватися як об'єкт, використовуючи =рядковий літерал, об'єкт передачі, 2 способи прив'язки.
3. Дані можуть передаватися як функція &рядкового літералу, викликає зовнішню функцію, може передавати дані з директиви в контролер.

Документація AngularJS щодо директив досить добре написана для того, що означають символи.

Щоб було зрозуміло, ви не можете просто так

scope: '@'

у визначенні директиви. Ви повинні мати властивості, щодо яких застосовуються ці прив'язки, як у:

scope: {
    myProperty: '@'
}

Я настійно пропоную прочитати документацію та навчальні посібники на сайті. Існує набагато більше інформації, яку потрібно знати про окремі сфери застосування та інші теми.

Ось пряма цитата з вищезв'язаної сторінки стосовно значень scope:

Властивість області може бути правдою, об'єктом або фальшивим значенням:

• помилка : для директиви не буде створено жодної сфери. Директива використовуватиме сферу застосування своїх батьків.

• true: Для елемента директиви буде створений новий дочірній область, яка прототипно успадковується від свого батьківського. Якщо кілька директив одного і того ж елемента вимагають нової області, створюється лише одна нова область. Нове правило області застосування не застосовується до кореня шаблону, оскільки корінь шаблону завжди отримує нову область.

• {...} (хеш об'єкта) : Для елемента директиви створюється нова область "ізоляції". Область "ізоляції" відрізняється від звичайної області тим, що не має прототипічно успадкованих від її батьківської області. Це корисно при створенні багаторазових компонентів, які не повинні випадково читати чи змінювати дані в батьківській області.

^{Отримано 2017-02-13 з https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, ліцензований як CC-by-SA 3.0}

У мене виникли проблеми з прив’язкою значення до будь-якого з символів у AngularJS 1.6. Я взагалі не отримав жодного значення undefined, навіть не дивлячись на те, що я зробив це точно так само, як і інші вкладення в тому самому файлі, який працював.

Проблема полягала в тому, що моє ім'я змінної підкреслило.

Це не вдається:

bindings: { import_nr: '='}

Це працює:

bindings: { importnr: '='}

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