[javascript] AngularJS에서 & vs @와 =의 차이점은 무엇입니까?

AngularJS를 처음 접했습니다. 누구나 AngularJS 연산자의 차이점을 설명 할 수 있습니까 &, @ and =?



답변

@지시문 속성에 정의 된 값을 지시문의 격리 범위로 전달할 수 있습니다. 값은 단순 문자열 값 ( myattr="hello")이거나 포함 된 표현식 ( myattr="my_{{helloText}}") 이있는 AngularJS 보간 문자열 일 수 있습니다 . 부모 범위에서 자식 지시어로의 “단방향”통신으로 생각하십시오. John Lindquist는 이들 각각을 설명하는 일련의 짧은 스크린 캐스트를 가지고 있습니다. @의 스크린 캐스트는 다음과 같습니다. https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&지시문의 분리 범위가 속성에 정의 된 표현식에서 평가하기 위해 상위 범위로 값을 전달할 수 있도록합니다. 지시문 속성은 내재적으로 표현식이며 이중 중괄호 표현식 구문을 사용하지 않습니다. 이것은 텍스트로 설명하기가 더 어렵습니다. 스크린 캐스트 &는 여기에 있습니다 : https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

=지시문의 격리 범위와 부모 범위 사이에 양방향 바인딩 식을 설정합니다. 자식 범위의 변경 사항은 부모 범위로 전파되며 그 반대도 마찬가지입니다. =를 @와 &의 조합으로 생각하십시오. =에 스크린 캐스트 : https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

마지막으로 여기에 세 가지를 모두 단일보기로 함께 사용하는 스크린 캐스트가 있습니다. https://egghead.io/lessons/angularjs-isolate-scope-review


답변

JavaScript 프로토 타입 상속의 관점에서 개념을 설명하고 싶습니다. 희망적으로 이해하는 데 도움이됩니다.

지시문의 범위를 정의하는 세 가지 옵션이 있습니다.

  1. scope: false: 각도 기본값입니다. 지시문의 범위는 정확히 부모 범위 중 하나입니다 ( parentScope).
  2. scope: true: Angular는이 지시문의 범위를 만듭니다. 스코프는 프로토 타입에서로 상속됩니다 parentScope.
  3. scope: {...}: 격리 된 범위는 아래에 설명되어 있습니다.

를 지정하면을 scope: {...}정의합니다 isolatedScope. 은 isolatedScope에서하지 상속 특성을 수행 parentScope하지만, isolatedScope.$parent === parentScope. 다음을 통해 정의됩니다.

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

isolatedScope에 직접 액세스 할 수 없습니다 parentScope. 그러나 때로는 지시문이와 통신해야합니다 parentScope. 그들은을 통해 의사 소통 @, =그리고 &. 문자를 사용하는 방법에 대한 주제 @, =&사용 시나리오에 대해 이야기하고 있습니다isolatedScope .

일반적으로 Modals와 같이 다른 페이지에서 공유하는 일부 공통 구성 요소에 사용됩니다. 격리 된 범위는 전체 범위를 오염시키지 않으며 페이지간에 쉽게 공유 할 수 있습니다.

기본 지시문은 다음과 같습니다. http://jsfiddle.net/7t984sf9/5/ . 설명 할 이미지는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

@: 단방향 바인딩

@속성을에서 parentScope로 전달합니다 isolatedScope. 이 속성 one-way bindingparentScope속성 값을 수정할 수 없음을 의미합니다 . JavaScript 상속에 익숙하면 다음 두 시나리오를 쉽게 이해할 수 있습니다.

  • 바인딩 속성이 interpolatedProp예제 와 같이 기본 유형 인 경우 :를 수정할 수 interpolatedProp는 있지만 변경할 수 parentProp1는 없습니다. 당신의 값을 변경하는 경우에는 parentProp1, interpolatedProp(각 $ 소화 경우) 새 값으로 덮어 쓰게됩니다.

  • 바인딩 속성이 다음과 같은 일부 객체 인 경우 parentObj: 전달 된 객체 isolatedScope가 참조이므로 값을 수정하면이 오류가 발생합니다.

    TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=: 양방향 바인딩

=를 호출 two-way binding하면를 수정 childScope하면의 값도 업데이트 parentScope되고 그 반대의 경우도 마찬가지입니다. 이 규칙은 기본 요소와 객체 모두에 적용됩니다. 바인딩 유형을 parentObj=변경하면의 값을 수정할 수 있습니다 parentObj.x. 일반적인 예는 ngModel입니다.

&: 함수 바인딩

&지시문이 parentScope함수 를 호출하고 지시문 에서 값을 전달할 수 있습니다. 예를 들어 JSFiddle : & in 지시문 범위를 확인하십시오 .

지시문에서 클릭 가능한 템플릿을 다음과 같이 정의하십시오.

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

그리고 다음과 같은 지시문을 사용하십시오.

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

변수 valueFromDirective는를 통해 지시문에서 상위 컨트롤러로 전달 {valueFromDirective: ...됩니다.

참조 : 범위 이해


답변

내 바이올린은 아니지만 http://jsfiddle.net/maxisam/QrCXh/ 는 차이점을 보여줍니다. 핵심은 다음과 같습니다.

           scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between
            parent and isolated scope. */
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        


답변

@ : 단방향 바인딩

= : 양방향 바인딩

& : 함수 바인딩


답변

AngularJS – 격리 된 범위 – @ vs = vs &


설명이있는 간단한 예는 아래 링크에서 볼 수 있습니다.

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ – 단방향 바인딩

지시문에서 :

scope : { nameValue : "@name" }

보기 :

<my-widget name="{{nameFromParentScope}}"></my-widget>

= – 양방향 바인딩

지시문에서 :

scope : { nameValue : "=name" },
link : function(scope) {
  scope.name = "Changing the value here will get reflected in parent scope value";
}

보기 :

<my-widget name="{{nameFromParentScope}}"></my-widget>

& – 함수 호출

지시에서 :

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

보기 :

<my-widget nameChange="onNameChange(newName)"></my-widget>


답변

이 문제를 해결하는 데 오랜 시간이 걸렸습니다. “@”는 현장에서 평가하고 “=”가 실제로 객체 자체를 전달하는 상수로 지시문에 전달되는 항목에 대한 것임을 이해하는 것이 중요했습니다.

http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes 에서 이것을 설명하는 멋진 블로그 게시물이 있습니다


답변