Использование символов "@", "&", "=" и ">" в обязательной привязке области действия: AngularJS

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

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

Ответ 1

В директиве 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 и означает одностороннюю привязку.

Ответ 2

> не содержится в документации.

< предназначен для односторонней привязки.

@ привязка для передачи строк. Эти строки поддерживают выражения {{}} для интерполированных значений.

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

& Связывание - это передача метода в область вашей директивы, чтобы его можно было вызвать внутри вашей директивы.

Когда мы устанавливаем область: true в директиве, Angular js создаст новую область для этой директивы. Это означает, что любые изменения, внесенные в область действия директивы, не будут отображаться в родительском контроллере.

Ответ 3

< односторонняя привязка

= двусторонняя привязка

& функция привязки

@ передать только строки

Ответ 4

Когда мы создаем директиву клиента, область действия директивы может быть в изолированной области. Это означает, что директива не разделяет область с контроллером; как директива, так и контроллер имеют свою собственную область. Однако данные могут быть переданы в область действия директивы тремя возможными способами.

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

Ответ 5

Документация AngularJS по директивам довольно хорошо написана для обозначения символов.

Чтобы быть понятным, вы не можете просто

scope: '@'

в определении директивы. У вас должны быть свойства, для которых применяются эти привязки, например:

scope: {
    myProperty: '@'
}

Я настоятельно рекомендую вам ознакомиться с документацией и учебными материалами на сайте. Существует гораздо больше информации, которую вам нужно знать об изолированных областях и других темах.

Вот прямая цитата из связанной страницы, касающаяся значений scope:

Свойство scope может быть истинным, объектом или ложным значением:

falsy: для этой директивы не будет создана область. Директива будет использовать свою родительскую область.

true: для элемента директивы будет создана новая дочерняя область, которая прототипно наследует от ее родителя. Если несколько директив одного элемента запрашивают новую область, создается только одна новая область. Новое правило области не применяется для корня шаблона, так как корень шаблона всегда получает новую область.

{...} (хэш объекта): для элемента директивы создается новая область "Изоляция". Область "isolate" отличается от обычной области видимости тем, что она не прототипически наследуется от родительской области. Это полезно при создании повторно используемых компонентов, которые не должны случайно считывать или изменять данные в родительской области.

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