AngularJS에서 지시문을 작성할 때 새 스코프, 새 하위 스코프 또는 새 격리 스코프가 필요하지 않은지 어떻게 결정합니까?

AngularJS에서 지시문을 작성할 때 새 스코프, 새 하위 스코프 또는 새 격리 스코프가 필요하지 않은지 어떻게 결정합니까?

새로운 지시문을 작성할 때 어떤 유형의 범위를 사용할지 결정하는 데 도움이 되는 가이드라인을 찾고 있습니다.이상적으로는 많은 질문을 받고 정답을 제시해 주는 흐름도와 같은 것을 원합니다.새로운 스코프, 새로운 자 스코프, 또는 새로운 격리 스코프는 필요 없습니다.다만, 너무 많은 것을 요구하고 있는 것 같습니다.다음은 저의 근소한 가이드라인입니다.

• 가 ng-model 'ng-model'을
  격리된 범위에서 ng-model을 사용할 수 있습니까?를 참조하십시오.그리고.
  포메터가 분리된 범위에서는 작동하지 않는 이유는 무엇입니까?
• 지시문이 범위/모델 속성을 수정하지 않으면 새 범위를 만들지 마십시오.
• 디렉티브가 일련의 DOM 요소를 캡슐화하고 있는 경우(설명서에 「복잡한 DOM 구조」라고 기재되어 있는 경우), 디렉티브가 요소로 사용되고 있는 경우, 또는 같은 요소에 다른 디렉티브가 없는 경우, 격리 스코프는 정상적으로 기능하는 것처럼 보입니다.

요소에서 분리된 스코프를 가진 디렉티브를 사용하면 동일한 요소에 있는 다른 모든 디렉티브가 동일한 격리 스코프를 사용하도록 강제된다는 것을 알고 있습니다.따라서 격리 스코프를 사용할 수 있는 경우는 크게 제한되지 않습니까?

Angular-UI 팀원(또는 많은 디렉티브를 작성한 사람)이 경험을 공유해 주었으면 합니다.

단순히 "재이용 가능한 컴포넌트에 격리된 범위 사용"이라는 답변은 추가하지 마십시오.

정말 좋은 질문이네요!다른 사람의 의견을 듣고 싶지만, 제가 사용하는 가이드라인은 다음과 같습니다.

고고도 전제: 스코프는 부모 컨트롤러, 디렉티브 및 디렉티브템플릿 간의 통신에 사용하는 "글루"로 사용됩니다.

위위: : scope: false에 전혀 가 없습니다.

자주 사용하는 것은 아니지만, @MarkRajcok이 말했듯이 디렉티브가 범위 변수에 액세스하지 않으면(또한 설정도 하지 않는 것이 명백합니다!) 이것은 제가 생각하는 한 문제 없습니다.이는 부모 지시문의 컨텍스트에서만 사용되며(항상 예외가 있음) 템플릿이 없는 하위 지시문에도 유용합니다.기본적으로 템플릿이 있는 모든 것은 범위를 공유할 수 없습니다. 왜냐하면 사용자는 본질적으로 해당 범위를 액세스 및 조작에 노출하기 때문입니다(단, 이 규칙에는 예외가 있을 수 있습니다.

예를 들어, 최근 작성 중인 SVG 라이브러리를 사용하여 (정적) 벡터 그래픽을 그리는 디렉티브를 작성했습니다.$observe아트리뷰트(2개의 아트리뷰트)width ★★★★★★★★★★★★★★★★★」height를 사용하여 계산하지만 스코프 변수를 설정하거나 읽거나 템플릿이 없습니다.이는 다른 범위를 만들지 않는 데 적합한 활용 사례입니다. 필요 없는 범위인데 굳이 신경 쓸 필요가 없습니다.

그러나 다른 SVG 지침에서는 사용할 데이터 세트가 필요했고, 추가로 아주 작은 상태의 저장도 필요했습니다.이 경우 부모 스코프를 사용하는 것은 무책임한 것입니다(다시 말씀드리지만 일반적으로는).그래서 대신...

하위 범위: scope: true

하위 범위를 가진 지시문은 컨텍스트 인식이며 현재 범위와 상호 작용하도록 의도되어 있습니다.

이 은 사용자가 롭게 사용할 수 를 들어, 「」를 사용해 주세요.class="item-type-{{item.type}}"격리 스코프가 있는 명령어에서는 기본적으로는 동작하지 않지만 보간된 것은 기본적으로 상위 스코프에서 찾을 수 있기 때문에 하위 스코프가 있는 명령어에서는 정상적으로 동작합니다.또한 지침 자체는 부모의 오염이나 피해를 걱정하지 않고 자신의 범위 내에서 속성과 표현을 안전하게 평가할 수 있다.

예를 들어 툴팁은 추가된 것으로 격리 스코프는 기능하지 않습니다(기본적으로 아래 참조). 여기에는 다른 지시어나 보간 속성을 사용해야 합니다.툴팁은 확장일 뿐입니다.단, 툴팁에서는 서브 디렉티브나 템플릿에서 사용할 수 있도록 스코프에 몇 가지 설정을 해야 합니다.또한 부모 스코프를 사용하는 것은 매우 좋지 않습니다.우리는 그것을 오염시키거나 손상시키고 있습니다. 부에노도 마찬가지입니다.

격리 또는 부모 스코프보다 자녀 스코프를 더 자주 사용하고 있습니다.

범위 분리: scope: {}

재사용 가능한 컴포넌트용입니다. :- )

하지만 진지하게 말하자면, 저는 "재이용 가능한 컴포넌트"를 "자체 포함 컴포넌트"라고 생각합니다.그 목적은 특정 목적을 위해 사용되는 것이므로 다른 지시와 결합하거나 다른 보간 속성을 DOM 노드에 추가하는 것은 본질적으로 의미가 없습니다.

좀 더 구체적으로 말하면, 이 독립 실행형 기능에 필요한 모든 것이 상위 범위의 컨텍스트에서 평가된 지정된 속성을 통해 제공됩니다. 즉, 단방향 문자열('@', 단방향 표현식('&') 또는 양방향 변수 바인딩('=')입니다.

독립형 컴포넌트에서는 다른 지시어나 속성을 적용할 필요가 없습니다.그것은 그 자체로 존재하기 때문입니다.스타일은 자체 템플릿에 의해 제어되며(필요한 경우), 적절한 내용을 변환(필요한 경우)할 수 있습니다.독립 실행형이기 때문에 격리된 범위 내에 배치하여 다음과 같이 말합니다. "이 문제를 해결하지 마십시오.이 몇 가지 속성을 통해 정의된 API를 제공합니다."

베스트 프랙티스는 디렉티브링크 및 컨트롤러 기능에서 템플릿 기반의 내용을 가능한 한 많이 제외하는 것입니다.이를 통해 또 다른 "API와 같은" 구성 지점이 제공됩니다. 즉, 디렉티브 사용자는 템플릿을 쉽게 교체할 수 있습니다.기능은 모두 그대로 유지되고 내부 API는 건드리지 않았지만 스타일링과 DOM 구현에 필요한 만큼 손댈 수 있습니다.ui/bootstrap은 Peter & Pawel이 훌륭하기 때문에 이를 잘 수행하는 좋은 예입니다.

격리 스코프는 트랜스클루전에도 매우 적합합니다.탭은 기능 전체일 뿐만 아니라 탭(및 창)을 그대로 두고 부모 범위 내에서 자유롭게 평가할 수 있습니다.탭에는 범위(템플릿과 상호 작용하기 위해)에 속하는 자체 상태가 분명히 있지만, 이 상태는 사용된 컨텍스트와는 아무런 관련이 없습니다. 탭 지시문이 탭 지시문이 되는 것에 전적으로 내부적입니다.또한 탭과 함께 다른 지시사항을 사용하는 것은 그다지 의미가 없습니다.탭입니다.이 기능은 이미 준비되어 있습니다.

더 많은 기능으로 둘러싸거나 더 많은 기능을 초월할 수도 있지만, 지시문은 이미 있는 그대로입니다.

것은 바와 등을해야 합니다.예를 들어 아이 스코프 섹션에서 격리 스코프(기본값)를 사용할 때 비방향 속성이 끊기는 보간법을 언급했습니다. 사용법을 수 있습니다.class="item-type-{{$parent.item.type}}"그리고 다시 작동하게 될 것이다.따라서 하위 범위에 대해 격리된 범위를 사용해야 하는 설득력 있는 이유가 있지만 이러한 제한 중 일부가 걱정되는 경우에는 필요에 따라 거의 모든 범위를 해결할 수 있다는 것을 알아야 합니다.

요약

새로운 범위가 없는 디렉티브는 읽기 전용으로, 완전히 신뢰되고(즉, 앱 내부) 잭을 터치하지 않습니다.하위 범위를 가진 지시문은 기능을 추가하지만 이러한 지시문만 기능은 아닙니다.마지막으로 격리범위는 전체 목표인 디렉티브용입니다.스탠드 아론이기 때문에 부정행위를 해도 상관없습니다(대부분 '정답').

처음 생각을 정리하고 싶었지만 더 많은 것을 생각하면서 업데이트 하겠습니다.하지만 이런 젠장, SO답변엔 너무 길어...

---

PS: 완전히 접선적이지만, 스코프에 대해 이야기하면, 저는 「원형」이라고 말하는 것을 선호합니다만, 다른 사람들은 「원형」이라고 하는 것을 선호합니다.이것은 더 정확해 보이지만, 혀에서 전혀 굴러떨어지지 않습니다. :- )

개인 정책 및 경험:

격리: 프라이빗 샌드박스

사용자가 직접 보거나 액세스하지 않고 내 지시에서만 사용되는 많은 스코프 메서드와 변수를 만들고 싶다.사용할 수 있는 범위 데이터를 화이트리스트에 추가하려고 합니다.transclusion을 사용하여 사용자가 상위 범위(영향 없음)에서 다시 점프할 수 있습니다.나는 내 변수와 방법들이 탈선된 아이들에게 접근되는 것을 원하지 않는다.

하위: 콘텐츠의 하위 섹션

사용자가 액세스할 수 있지만 지시문 이외의 주변 범위(자매 및 부모)와는 관련이 없는 범위 메서드 및 변수를 만들고 싶다.또한 모든 부모 스코프 데이터가 투명하게 흘러내리도록 하고 싶습니다.

없음: 심플한 읽기 전용

스코프 메서드나 변수를 조작할 필요가 없습니다.아마도 스코프와 무관한 작업(단순한 jQuery 플러그인 표시, 검증 등)을 하고 있을 것입니다.

메모들

• 다른 에 직접 영향을 하십시오.ngModel른 、 른른른른른 。 수 요.ng-model=$parent.myVal (자녀)ngModel: '='( ( )
• 격리 + 트랜슬루드는 모든 정상적인 동작을 형제지시로 되돌리고 부모 범위로 돌아가므로, 그것 역시 당신의 판단에 영향을 미치지 않도록 하십시오.
• 스코프를 none으로 조작하지 마십시오.이것은 DOM의 하위 절반의 스코프에 데이터를 넣는 것과 같기 때문입니다만, 상위 절반의 스코프는 0이 됩니다.
• 지시적인 우선순위에 주의한다(이것이 어떻게 영향을 미칠 수 있는지에 대한 구체적인 예가 없다).
• 서비스를 주입하거나 컨트롤러를 사용하여 모든 범위 유형과 디렉티브 간에 통신할 수 있습니다.도 할 수 있어요.require: '^ngModel'참조할 수 있습니다.

지시문을 저는 조금 적게 .isolated스코프로 할 수 됩니다. 쿨하고 데이터를 캡슐화하고 상위 스코프로 데이터를 유출하지 않도록 주의해도 함께 사용할 수 있는 명령어의 양이 크게 제한됩니다.so,는,

작성하는 디렉티브가 그 자체로 동작하고, 다른 디렉티브와 공유하지 않는 경우는, 격리된 범위로 합니다.(최종 개발자가 커스터마이즈할 필요가 없는 컴포넌트) (디렉티브가 있는 서브스크립트를 작성하려고 하면 매우 곤란해집니다)

작성하는 디렉티브가 내부 스코프 상태나 명시적인 스코프 변경(대부분 매우 간단한 것)이 필요 없는 돔 조작을 실시하는 경우는, 새로운 스코프에는 대응하지 말아 주세요.(예:ngShow,ngMouseHover,ngClick,ngRepeat)

작성할 지시문이 상위 범위의 일부 요소를 변경해야 하지만 내부 상태도 처리해야 하는 경우 새 하위 범위를 선택하십시오.(예:ngController)

지시에 대해서는, 다음의 소스 코드를 확인해 주세요.https://github.com/angular/angular.js/tree/master/src/ng/directive
은 그들을 데 큰 .

현재의 이해와 그것이 다른 JS의 개념과 어떻게 관련되어 있는지 덧붙이려고 합니다.

기본값(예: 선언되지 않았거나 범위: false)

이것은 철학적으로 글로벌 변수를 사용하는 것과 같다.디렉티브는 부모 컨트롤러의 모든 것에 액세스 할 수 있습니다만, 부모 컨트롤러에 영향을 주는 것과 동시에 영향을 받습니다.

범위: {}

이것은 모듈과 같은 것으로, 사용하고 싶은 것은 모두 명시적으로 건네져야 합니다.사용하는 모든 지시문이 격리 범위인 경우 모든 종속성을 주입하는 데 많은 오버헤드를 수반하는 자체 모듈을 작성하는 것과 같을 수 있습니다.

범위: 아이

이것은 글로벌 변수와 명시 패스스루 사이의 중간 접지입니다.javascript의 프로토타입 체인과 유사하며 상위 스코프의 복사본을 확장합니다.격리 범위를 생성하여 상위 범위의 모든 속성 및 함수를 전달하면 기능적으로 이와 동일합니다.

---

중요한 것은 어떤 지시도 어떤 식으로든 쓰여질 수 있다는 것입니다.다른 범위 선언은 정리하는 데 도움이 됩니다.모든 것을 모듈로 만들 수도 있고 모든 글로벌 변수를 사용하여 매우 주의할 수도 있습니다.유지보수의 용이성을 위해 논리적으로 일관된 부품으로 논리를 모듈화하는 것이 좋습니다.탁 트인 목초지와 폐쇄된 교도소 사이에는 균형이 있다.이것이 어려운 이유는 사람들이 이것에 대해 알게 되면 디렉티브의 구조에 대해 배우고 있다고 생각하지만 실제로는 코드/로직 구성에 대해 배우고 있기 때문입니다.

디렉티브가 어떻게 기능하는지 알아내는 데 도움이 된 또 다른 것은 ngInclude에 대해 배우는 것입니다.ngInclude를 사용하면 html 파셜을 포함할 수 있습니다.처음에 디렉티브를 사용하기 시작했을 때 코드를 줄이기 위해 템플릿 옵션을 사용할 수 있다는 것을 알게 되었습니다만, 실제로는 논리를 붙이지 않았습니다.

물론 앵글의 지시와 앵글-의 팀의 작업 사이에 저는 아직 제 자신의 지시를 만들어 본 적이 없기 때문에 이것에 대한 제 견해가 완전히 틀릴 수도 있습니다.

나는 Umur와 동의한다.이론적으로 고립된 스코프는 훌륭하고 "휴대성"으로 들리지만, 간단한 기능이 아닌 앱을 구축하면서 도메인 고유의 언어의 목적인 나만의 HTML로 완전히 쓰기 위해 몇 가지 지시문(다른 명령어 안에 중첩된 명령어 또는 속성을 추가하는 명령어)을 포함할 필요가 있다는 것을 알게 되었습니다.

결국 디렉티브의 각 DOM 호출에 대해 여러 속성을 가진 모든 글로벌 값 또는 공유 값을 체인 아래로 전달해야 하는 것은 너무 이상합니다(분리된 범위에서의 요구 사항).이 모든 것을 DOM에 반복해서 쓰는 것은 바보 같고, 공유 객체라고 해도 비효율적으로 느껴집니다.그것은 또한 지시 선언을 불필요하게 복잡하게 만든다.$parent를 사용하여 지시 HTML에서 값을 "접근"하여 얻는 회피책은 매우 잘못된 형식인 것 같습니다.

저도 결국 앱을 변경하여 아이스코프 디렉티브가 거의 없고 아이스코프 디렉티브는 거의 없습니다.단순하고 반복적이지 않은 속성을 통해 전달될 수 있는 것 이외에는 부모로부터 아무것도 액세스 할 필요가 없는 디렉티브만 있습니다.

그런 일이 생기기 전에 수십 년 동안 도메인 고유의 언어라는 꿈을 꿔왔기 때문에, 나는 Angular에 매우 기뻐하고 있다.JS는 이 옵션을 제공하고 있으며, 이 영역에서 더 많은 개발자가 작업함에 따라 설계자가 쉽게 작성, 확장 및 디버깅할 수 있는 매우 멋진 애플리케이션도 등장할 것으로 예상됩니다.

-- D.

언급URL : https://stackoverflow.com/questions/14914213/when-writing-a-directive-in-angularjs-how-do-i-decide-if-i-need-no-new-scope-a