AngularJS에서 & vs @와 =의 차이점은 무엇입니까?
답변:
@지시문 속성에 정의 된 값을 지시문의 격리 범위로 전달할 수 있습니다. 값은 단순 문자열 값 ( 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 프로토 타입 상속의 관점에서 개념을 설명하고 싶습니다. 희망적으로 이해하는 데 도움이됩니다.
지시문의 범위를 정의하는 세 가지 옵션이 있습니다.
scope: false: 각도 기본값입니다. 지시문의 범위는 정확히 부모 범위 중 하나입니다 (parentScope).scope: true: Angular는이 지시문의 범위를 만듭니다. 스코프는 프로토 타입에서로 상속됩니다parentScope.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 binding은 parentScope속성 값을 수정할 수 없음을 의미합니다 . 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 에서 이것을 설명하는 멋진 블로그 게시물이 있습니다