AngularJS : 지시적 범위에서의 =와 @의 차이는?

AngularJS : 지시적 범위에서의 =와 @의 차이는?

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

AngularJS의 지시적 스코프에서 '@'와 '='의 차이점은 무엇입니까? (18개 답변)

닫힘8년 전.

지시문 내에 격리 스코프를 생성하면 외부 스코프를 내부 스코프에 매핑할 수 있습니다.아트리뷰트에 매핑하는 방법은 6가지가 있습니다.

1. = 속성
2. 속성(&attr)
3. @attr
4. =
5. &
6. @

각 스코프 매핑옵션의 역할은 무엇입니까?

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

이 바이올린을 통해 모든 것을 연결할 수 있습니다.http://jsfiddle.net/jeremylikness/3pvte/

그리고 설명...지시문이 다음과 같은 경우:

<my-directive target="foo"/> 

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

{ target : '=' } 

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

{ bar : '=target' } 

그러면 scope.bar이 $194에 바인드됩니다.foo. 다시 양방향 바인딩을 지정하지만 속성의 "target"이 내부 스코프에 "bar"로 표시되도록 지시하기 때문입니다.scope.bar를 변경하면 $190이 갱신됩니다.푸우

{ 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" />

부모 스코프의 값이 $125.a = 1이고 $125.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. &

타깃 DOM Atribute의 이름이 isolate scope proprty name과 일치하는 경우 4, 5, 6을 사용합니다.다음으로 동작하고 있는 예를 나타냅니다.

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>

자바스크립트

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