bestsource

범위 간의 차이는 무엇입니까?{} 및 범위: true inside 디렉티브?

bestsource 2023. 2. 23. 22:58
반응형

범위 간의 차이는 무엇입니까?{} 및 범위: true inside 디렉티브?

Angular.js에 대한 정보를 찾을 수 없으며 작업 중에 두 값이 서로 다르게 작동한다는 것을 알게 되었습니다.뭐가 다른데?

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});

둘다요.scope: true그리고.scope:{}는 디렉티브의 자 스코프를 작성합니다.그렇지만,

scope:true(지시가 있는 컨트롤러와 같은) 부모로부터 프로토타입으로 속성을 상속합니다.scope:{}부모로부터 속성을 상속받지 않기 때문에 호출됩니다.isolated

예를 들어 컨트롤러 c1과 2개의 디렉티브 d1과 d2가 있다고 합시다.

app.controller('c1', function($scope){
  $scope.prop = "some value";
});

.directive('d1', function() {
  return {
    scope: true
  };
});

.directive('d2', function() {
  return {
    scope: {}
  };
});

<div ng-controller="c1">
  <d1><d1>
  <d2><d2>
</div>

d1(d1:true)은 c1 스코프 -> 프로포트에 액세스 할 수 있습니다.여기서 d2는 c1 스코프에서 분리되어 있습니다.

1: d1과 d2 모두 정의된 각 디렉티브에 대해 새로운 스코프가 생성됩니다.

2: 두 가지 차이 외에scope:true- 새 하위 범위에 대한 변경 내용은 상위 범위에 반영되지 않습니다.다만, 새로운 스코프가 부모 스코프에서 상속되기 때문에, c1 스코프(부모 스코프)의 변경은 디렉티브 스코프에 반영됩니다.

힌트: 사용scope:{}또는isolated scope재사용 가능한 각도 지시어에 사용됩니다.부모 스코프 속성을 조작하지 않도록 하기 위해

scope : true

Angular JS는 상위 범위(일반적으로 컨트롤러 범위, 그렇지 않으면 애플리케이션의 루트 범위)를 상속하여 새 범위를 만듭니다.

주의: 이 새로운 스코프에 대한 변경은 부모 스코프에 반영되지 않습니다.단, 새로운 범위는 상위 범위에서 상속되므로 상위 범위(컨트롤러)에서 이루어진 변경은 모두 지시 범위에 반영됩니다.

범위 : false

컨트롤러와 디렉티브가 같은 스코프 오브젝트를 사용하고 있습니다.즉, 컨트롤러 또는 디렉티브에 대한 모든 변경이 동기화됨을 의미합니다.

범위: {}

지시문에 대해 생성된 새 범위이지만 상위 범위에서 상속되지 않습니다.이 새로운 스코프는 부모 스코프에서 완전히 분리되어 있기 때문에 격리 스코프라고도 불립니다.

scope: true는 부모로부터 모든 것을 상속하는 디렉티브의 새로운 범위를 만듭니다.

scope : {}은(는) 디렉티브의 새로운 범위도 작성하지만 분리된 상태이기 때문에 부모로부터 아무것도 상속받지 않습니다.

다음 기사를 보세요.

http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

scope: true스코프에서 에서 상속됩니다. 부모 스코프에서 상속됩니다.scope: {}부모로부터 분리된 스코프를 만듭니다.

Angular의 'scope' 선언JS 디렉티브는 'Directive Definition Object'의 속성으로, 사용자가 정의한 디렉티브 함수에 의해 실제로 반환됩니다.'scope'에 대한 옵션은 지시 정의 객체에 대한 공식 각도 문서에 설명되어 있습니다.

https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object

매뉴얼에서 직접 인용한 설명은 다음과 같습니다.

범위

스코프 속성은 false, true 또는 객체일 수 있습니다.

false(기본값):지시문에 대한 범위는 생성되지 않습니다.지시문은 상위 범위를 사용합니다.

true: 명령어 요소에 대해 부모로부터 프로토타입으로 상속되는 새로운 자식 범위가 생성됩니다.같은 요소의 여러 디렉티브가 새로운 범위를 요구하면 새로운 범위는 1개만 생성됩니다.

{...}(개체 해시):지시문 템플릿에 대해 새로운 "분리" 범위가 생성됩니다.'분리' 범위는 원형적으로 상위 범위에서 상속되지 않는다는 점에서 일반 범위와 다릅니다.이 기능은 재사용 가능한 구성 요소를 만들 때 유용합니다. 이 구성 요소는 실수로 상위 범위의 데이터를 읽거나 수정하지 않아야 합니다.템플릿 또는 templateUrl이 없는 분리 범위 디렉티브는 분리 범위를 자식 요소에 적용하지 않습니다.

언급URL : https://stackoverflow.com/questions/24528388/what-is-the-difference-between-scope-and-scopetrue-inside-directive

반응형