AngularJS : 지시문 범위에서 = & @의 차이점은 무엇입니까?

AngularJS : 지시문 범위에서 = & @의 차이점은 무엇입니까? [복제]

---

이 질문에 이미 답변이 있습니다.

• AngularJS의 지시문 범위에서 '@'와 '='의 차이점은 무엇입니까? 18 답변

지시문 안에 격리 범위를 만들면 외부 범위 를 내부 범위에 매핑 할 수 있습니다 . 속성에 매핑하는 여섯 가지 방법을 살펴 보았습니다.

1. = attr
2. & attr
3. @attr
4. =
5. &
6. @

이러한 각 범위 매핑 옵션의 기능은 무엇입니까?

---

이것은 혼란 스러울 수 있지만 간단한 예가 그것을 명확히 할 수 있기를 바랍니다. 먼저 모델 바인딩을 동작과 분리 해 보겠습니다.

다음은 함께 연결하는 데 도움이되는 바이올린입니다. http://jsfiddle.net/jeremylikness/3pvte/

그리고 설명 ... 당신의 지시문이 다음과 같으면 :

<my-directive target="foo"/> 

그런 다음 범위에 대해 다음과 같은 가능성이 있습니다.

{ target : '=' } 

그러면 scope.target (지시문)이 $ scope.foo (외부 범위)에 바인딩됩니다. 이는 =가 양방향 바인딩 용이고 아무것도 지정하지 않으면 내부 범위의 이름을 지시문의 속성 이름과 자동으로 일치시키기 때문입니다. scope.target을 변경하면 $ scope.foo가 업데이트됩니다.

{ bar : '=target' } 

이것은 scope.bar를 $ scope.foo에 바인딩 할 것입니다. 이는 다시 양방향 바인딩을 지정하지만 "target"속성에있는 것이 내부 범위에 "bar"로 나타나야한다고 지시문에 알려주기 때문입니다. scope.bar를 변경하면 $ scope.foo가 업데이트됩니다.

{ target : '@' } 

@는 "말 그대로 받아들이 기"를 의미하기 때문에 scope.target을 "foo"로 설정합니다. scope.target에 대한 변경 사항은 지시문 외부로 전파되지 않습니다.

{ bar : '@target' } 

@이 대상 속성에서 값을 가져 오기 때문에 scope.bar가 "foo"로 설정됩니다. scope.bar에 대한 변경 사항은 지시문 외부로 전파되지 않습니다.

이제 행동에 대해 이야기합시다. 외부 범위에 다음이 있다고 가정합니다.

$scope.foo = function(parm1, parm2) { console.log(parm1 + ": " + parm2); } 

여기에 액세스 할 수있는 방법에는 여러 가지가 있습니다. HTML이 다음과 같은 경우 :

<my-directive target='foo'>

그때

{ target : '=' } 

지시문에서 scope.target (1,2)을 호출 할 수 있습니다.

같은 것,

{ bar : '=target' }

지시문에서 scope.bar (1,2)를 호출 할 수 있습니다.

더 일반적인 방법은 이것을 행동으로 설정하는 것입니다. 기술적으로 앰퍼샌드는 부모 컨텍스트에서 식을 평가합니다. 그것은 중요합니다. 그래서 나는 가질 수 있습니다.

<my-directive target="a+b" />

그리고 부모 범위에 $ scope.a = 1 및 $ scope.b = 2가있는 경우 내 지시문에서 :

{ target: '&' } 

scope.target ()을 호출하면 결과는 3이됩니다. 이것은 중요합니다. 바인딩은 내부 범위에 대한 함수로 노출되지만 지시문은 표현식에 바인딩 될 수 있습니다.

이를 수행하는보다 일반적인 방법은 다음과 같습니다.

<my-directive target="foo(val1,val2)"> 

그런 다음 다음을 사용할 수 있습니다.

{ target: '&' }

그리고 지시문에서 호출하십시오.

scope.target({val1: 1, val2: 2}); 

전달한 객체를 가져 와서 평가 된 표현식의 매개 변수에 속성을 매핑 한 다음 동작을 호출합니다.이 경우 $ scope.foo (1,2);

다음과 같이 할 수도 있습니다.

<my-directive target="foo(1, val)"/>

이것은 첫 번째 매개 변수를 리터럴 1과 지시문에서 잠급니다.

{ bar: '&target' }

그때:

scope.bar(5) 

$ scope.foo (1,5);

---

요약

1. @attr 은 일치하는 DOM 속성의 평가 된 문자열 값에 바인딩 합니다.
2. = attr 은 일치하는 DOM 속성의 범위 속성에 바인딩 합니다 .
3. & attr 은 일치하는 DOM 속성의 범위 함수에 바인딩 합니다 .
4. @
5. =
6. &

We use the 4, 5, and 6 if the target DOM attribute's name matches the isolate scope proprty name. Here is a working fiddle of the following example.

Html

<div ng-app='isolate'>
     <h3>Outer Scope</h3>

    <input type="text" ng-model="myModel" />
    <p>msg: {{ msg }}</p>
     <h3>Inner Scope</h3>

    <div id="inner">
        <div my-directive at="{{ myModel }}" equals="myModel" ampersand="msg=msg+'click'"></div>
    </div>
</div>

Javascript

angular.module('isolate', [])
    .directive('myDirective', function () {
    return {
        template:
            '<label>@attr</label><input value="{{ myAt }}" />' +
            '<label>@</label><input value="{{ at }}" />' +
            '<label>=attr</label><input ng-model="myEquals" />' +
            '<label>=</label><input ng-model="equals" />' +
            '<label>&attr</label><input type="button" ng-click="myAmpersand()" value="Btn" />' +
            '<label>&</label><input type="button" ng-click="ampersand()" value="Btn" />',
        scope: {
            myAt: '@at',
            myEquals: '=equals',
            myAmpersand: '&ampersand',
            at: '@',
            equals: '=',
            ampersand: '&'
        }
    };
});

참고URL : https://stackoverflow.com/questions/21712147/angularjs-differences-among-in-directive-scope