AngularJS
Параметры привязки AngularJS (`=`, `@`, `&` и т. Д.)

замечания

@ односторонняя привязка, привязка атрибута.

Перейдите в буквальное значение (а не объект), например строку или номер.

Область Child получает свое значение, если оно обновляет значение, родительская область имеет свое собственное старое значение (дочерняя область не может изменять значение поля parens). Когда значение родительской области видимости изменяется, значение дочернего объекта также будет изменено. Все интерполяции появляются каждый раз при вызове дайджеста, а не только при создании директивы.

<one-way text="Simple text." <!-- 'Simple text.' -->
         simple-value="123" <!-- '123' Note, is actually a string object. -->
         interpolated-value="{{parentScopeValue}}" <!-- Some value from parent scope. You can't change parent scope value, only child scope value. Note, is actually a string object. -->
         interpolated-function-value="{{parentScopeFunction()}}" <!-- Executes parent scope function and takes a value. -->
         
         <!-- Unexpected usage. -->
         object-item="{{objectItem}}" <!-- Converts object|date to string. Result might be: '{"a":5,"b":"text"}'. -->
         function-item="{{parentScopeFunction}}"> <!-- Will be an empty string. -->
</one-way>

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

Передавая значение по ссылке, вы хотите разделить значение между обеими областями и управлять ими из обеих областей. Вы не должны использовать {{...}} для интерполяции.

<two-way text="'Simple text.'" <!-- 'Simple text.' -->
         simple-value="123" <!-- 123 Note, is actually a number now. -->
         interpolated-value="parentScopeValue" <!-- Some value from parent scope. You may change it in one scope and have updated value in another. -->
         object-item="objectItem" <!-- Some object from parent scope. You may change object properties in one scope and have updated properties in another. -->
         
         <!-- Unexpected usage. -->
         interpolated-function-value="parentScopeFunction()" <!-- Will raise an error. -->
         function-item="incrementInterpolated"> <!-- Pass the function by reference and you may use it in child scope. -->
</two-way>

Передача функции по ссылке - это плохая идея: позволить области изменять определение функции, а два ненужных наблюдателя будут созданы, вам нужно минимизировать количество наблюдателей.

& привязка функции, привязка выражения.

Передайте метод в директиву. Он обеспечивает способ выполнения выражения в контексте родительской области. Метод будет выполняться в рамках родителя, вы можете передать некоторые параметры из области дочернего объекта. Вы не должны использовать {{...}} для интерполяции. Когда вы используете & в директиве, она генерирует функцию, которая возвращает значение выражения, вычисленного против родительской области (не то же самое, что = где вы просто передаете ссылку).

<expression-binding interpolated-function-value="incrementInterpolated(param)" <!-- interpolatedFunctionValue({param: 'Hey'}) will call passed function with an argument. -->
                    function-item="incrementInterpolated" <!-- functionItem({param: 'Hey'})() will call passed function, but with no possibility set up a parameter. -->
                    text="'Simple text.'"  <!-- text() == 'Simple text.'-->
                    simple-value="123" <!-- simpleValue() == 123 -->
                    interpolated-value="parentScopeValue" <!-- interpolatedValue() == Some value from parent scope. -->
                    object-item="objectItem"> <!-- objectItem() == Object item from parent scope. -->
</expression-binding>

Все параметры будут включены в функции.

Доступное связывание через простой образец

angular.component("SampleComponent", {
  bindings: {
     title: '@',
     movies: '<',
     reservation: "=",
     processReservation: "&"
  }
});

Здесь мы имеем все связывающие элементы.

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

< обозначает одностороннюю привязку . Обновления в родительской области будут распространяться на область «Дети», но любое обновление в области «Дети» не будет применяться к родительской области.

= уже известен как двусторонняя привязка. Каждое обновление родительской области будет применяться к дочерним, и каждое дочернее обновление будет применено к родительской области.

& теперь используется для привязки вывода. Согласно документации по компоненту, ее следует использовать для ссылки на метод родительской области. Вместо того, чтобы манипулировать областью children, просто вызовите родительский метод с обновленными данными!

Связать необязательный атрибут

bindings: {
   mandatory: '=' 
   optional: '=?',
   foo: '=?bar'
}

Необязательные атрибуты должны быть отмечены знаком вопроса: =? или =?bar . Это защита исключения ($compile:nonassign) .