& vs @ 및 =의 각도 차이는 무엇입니까?JS

& vs @ 및 =의 각도 차이는 무엇입니까?JS

Angular는입니다.JS. 누가 이 각도들 사이의 차이점을 설명해 줄 수 있나요? 연산자: JS 산자 js:&, @ and =★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

@를 사용하면 디렉티브아트리뷰트에 정의되어 있는 값을 디렉티브의 격리 스코프로 전달할 수 있습니다. 값 「」 「」 「」)으로 할 수 .myattr="hello"또는 Angular일 수 있습니다.된 식JS)myattr="my_{{helloText}}"부모 스코프에서 자녀 디렉티브로의 「단방향」통신이라고 생각됩니다.존 린드퀴스트는 이 모든 것을 설명하는 일련의 짧은 스크린캐스트를 가지고 있다.@에 대한 스크린캐스트는 https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding 에서 보실 수 있습니다.

&디렉티브의 격리 스코프가 Atribute에 정의된 식에서 값을 부모 스코프로 전달하여 평가할 수 있습니다.디렉티브 Atribut은 암묵적으로 표현이며 이중 컬리 괄호 표현 구문은 사용하지 않습니다.이건 텍스트로 설명하기가 더 어려워요.스크린캐스트는 이쪽: 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

자바스크립트 프로토타입 상속의 관점에서 개념을 설명하겠습니다.이해하는데 도움이 되길 바라.

디렉티브의 범위를 정의하려면 다음 3가지 옵션이 있습니다.

1. scope: false: 기본값 각도 기본값. 부모 스코프의 입니다( 「1」).parentScope를 참조해 주세요.
2. scope: true는 이 앵귤러으로 스스 from from from from from from from from from from from from from from from from 에서 계승하고 있습니다.parentScope.
3. scope: {...}를 아래에 격리된 스코프는 다음과 같습니다.

「」의 지정scope: {...} isolatedScopeA . ANisolatedScope에서 속성을 상속하지 않습니다.parentScope ~는isolatedScope.$parent === parentScope 을 통해 됩니다. 이 값은 다음과 같이 정의됩니다.

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

isolatedScope 할 수 .parentScope '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.parentScope은 ...을 통해 을 통해 소통합니다.@,= ★★★★★★★★★★★★★★★★★」&. 기호 사용에 대한 토픽 및 를 사용한 시나리오에 대해 설명합니다.

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

다음은 기본적인 지시사항입니다.http://jsfiddle.net/7t984sf9/5/설명해야 할 이미지는 다음과 같습니다.

@ 바인딩 : " " " "

@을 parentScope로로 합니다.isolatedScope. 라고one-way binding, 이 값은 할 수 parentScope을 잘 두 시나리오를 쉽게 할 수 .JavaScript 상속을 잘 알고 있다면 다음 두 가지 시나리오를 쉽게 이해할 수 있습니다.

• 바인딩 속성이 다음과 같은 원시 유형인 경우interpolatedProp예에서는 이렇게 할 수 있습니다.interpolatedPropparentProp1변경되지 않을 것입니다. 「」의 값을 하면, 「」의 값을 변경합니다.parentProp1,interpolatedProp120달러입니다.

• 바인딩 속성이 다음과 같은 객체인 경우parentObj에 : : : 。isolatedScope 오류가 발생합니다.

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

= 바인딩: "Direction-"

=라고 합니다.two-way binding의 어떤 ).childScope will 、 will in in in in の in the the the will the 、의 됩니다.parentScope그도 마찬가지입니다그리고 역도 성립.이 규칙은 기본 및 개체 모두에 적용됩니다.의 parentObj= 하면 ' 가능합니다'의 할 수 parentObj.x전형적인 예는 입니다.

& 바인딩: "기능 바인딩"

&는, 가 몇개의 콜을 할 수 있도록 .parentScope명령어로부터 몇 가지 값을 입력합니다.예를 들어 JSFiddle: & in directive scope를 선택합니다.

지시문에서 클릭 가능한 템플릿을 정의합니다.다음은 예를 제시하겠습니다.

<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- @-&-=-when-directions-using-discopes에 기재되어 있습니다.

언급URL : https://stackoverflow.com/questions/14908133/what-is-the-difference-between-vs-and-in-angularjs