Angularjs 지시어:격리된 범위 및 특성
여기 예를 참조해 주세요.
foodMeApp.directive('fmRating', function() {
return {
restrict: 'E',
scope: {
symbol: '@',
max: '@',
readonly: '@'
},
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
attrs.max = scope.max = parseInt(scope.max || 5, 10);
...
각도의 요구symbol
,max
,readonly
부모 스코프에서 액세스하기 위해 격리된 스코프 객체에 정의됩니다.
여기서 쓰이고 있다
<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>
그럼, 의 목적은 무엇일까요?attrs
? 통과된 모든 속성에 액세스할 수 없습니다.attrs
. max 값을 1개라도 액세스 할 수 없는 이유는 무엇입니까?attrs.max
대신scope.max
왜 이렇게 다시 할당합니까?attrs.max = scope.max
?
이 앱은 Angular 작가들이 만든 앱이기 때문에 이유가 있을 것 같습니다.
감사해요.
관객의 목적은 무엇입니까?
디렉티브와 같은 요소에 정의되어 있는 Atribut에는 몇 가지 목적이 있습니다.
- 격리 스코프를 사용하는 디렉티브에 정보를 전달할 수 있는 유일한 방법입니다.디렉티브 격리 스코프는 부모 스코프에서 프로토타입으로 상속되지 않기 때문에 격리 스코프에 전달할 대상을 지정할 수 있는 방법이 필요합니다.따라서 "개체 해시"의 '@', '=' 및 '&'는 각각 전달되는 데이터/정보를 지정하기 위한 속성을 필요로 합니다.
- 이들은 양방향 통신 메커니즘으로 기능한다. (예: 독립적인 Angular 간의 통신 관리)JS가 독립적으로 지시함)
- 아트리뷰트명을 정규화합니다.
Attribute를 통해 전달된 모든 Atribute에 액세스할 수 없습니까?
할 수 있지만
- 데이터 바인딩이 없습니다.
'@'는 단방향 "string" 데이터 바인딩 설정(부모 범위 → directive isolate scope) @을 사용하는 경우 디렉티브에 표시/가져오는 값은 항상 문자열이므로 디렉티브에 개체를 전달하려는 경우 이 값을 사용하지 마십시오.
'='는 양방향 데이터바인딩을 설정합니다(부모 스코프 ↔ 지시 격리 스코프).
데이터 바인딩이 없으면 $watch 또는 $observe 모델/데이터가 자동으로 변경될 수 없습니다. - 값 속성
{{}}
s는 보간되지 않기 때문에 문제를 일으킵니다.
예를 들어<my-directive name="My name is {{name}}">
부모 스코프는$scope.name='Mark'
그러면 링크 기능 안에서console.log(attrs.name)
을 낳다undefined
.
이름이 '@'로 정의된 격리 범위 속성인 경우attrs.$observe('name', function(val) { console.log(val) })
을 낳다My name is Mark
(링크 함수 내에서는 $observe()를 사용하여 보간값을 취득해야 합니다.)
max 값을 scope.max가 아닌 attrs.max로 설정할 수 없는 이유는 무엇입니까?
상기의 회답
attrs.max = scope.max와 같이 다시 할당하는 이유는 무엇입니까?
이것을 실시하는 유일한 이유는, 다른 디렉티브가 이 어트리뷰트/값을 확인할 필요가 있는 경우(즉, 인터다이렉트 통신)입니다. 이 뒤에 이 명령어가 동작합니다(이 명령어는 ' 정도'로 제어할 수'로 동작합니다).priority
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
범위를 으로 ""를 사용하지 " "는 사용하지 않습니다.attrs
(초기화 데이터/값을 디렉티브로 송신하는 방법이 될 수 있습니다.즉, 이러한 값에 대한 데이터 바인딩이 필요 없고 보간도 필요 없습니다.)
속성을 사용하면 다음과 같은 html 태그에 정의된 속성에 액세스할 수 있습니다.
<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true">
이 경우 기호 및 읽기 전용 속성에 액세스할 수 있습니다.커스텀 디렉티브에서 정의한 모든 Atribut은 atts 변수에 의해 사용할 수 있습니다.
블록:
attrs.max = scope.max = parseInt(scope.max || 5, 10);
현재 scope.max 값을 해석하여 할당합니다.존재하지 않는 경우 scope.max 및 attrs.max에 5를 할당합니다.이렇게 하면 할당 후 attrs.max에서 읽을 수 있습니다.그 전에 의 attributes.max 속성이 정의되지 않았습니다.
fmRating.js 소스 검사 이 코드가 사용되는 이유/어디서/언제인지 알 수 없습니다.
언급URL : https://stackoverflow.com/questions/14300986/angularjs-directive-isolated-scope-and-attrs
'programing' 카테고리의 다른 글
2개의 json/javascript 어레이를 1개의 어레이로 Marge합니다. (0) | 2023.03.06 |
---|---|
스프링 부츠 스타터 항아리가 뭐죠? (0) | 2023.03.06 |
바이트 어레이를 JSON에 배치하거나 그 반대도 마찬가지입니다. (0) | 2023.03.06 |
Typscript async/ait가 Angular를 업데이트하지 않음JS 뷰 (0) | 2023.03.01 |
WooCommerce - URL에서 제품 및 제품 카테고리를 삭제하는 방법 (0) | 2023.03.01 |