AngularJS
AngularJS 바인딩 옵션 (`=`,`@`,`&`등)

비고

@ 단방향 바인딩, 속성 바인딩.

문자열이나 숫자와 같은 리터럴 값 (객체가 아닌)을 전달합니다.

하위 범위는 값을 업데이트하는 경우 자체 값을 가져오고 상위 범위는 이전 값 (하위 범위는 괄호 범위 값을 수정할 수 없음)을가집니다. 상위 범위 값이 변경되면 하위 범위 값도 변경됩니다. 모든 보간은 지시 생성뿐만 아니라 다이제스트 호출에 매번 나타납니다.

<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) 예외에 대한 보호입니다.