사용자 정의 Angular에 '바꾸기' 기능을 사용하는 방법JS 디렉티브?
왜?replace=true
또는replace=false
아래 코드에 영향이 없습니까?
replace=false일 때 "기존 콘텐츠"가 표시되지 않는 이유는 무엇입니까?
아니면 좀 더 겸허하게 말씀드리면요.replace=true/false
기능과 사용 방법에 대해 설명하겠습니다.
예
JS/각도:
<script>
angular.module('scopes', [])
.controller('Ctrl', function($scope) {
$scope.title = "hello";
})
.directive('myDir', function() {
return {
restrict: 'E',
replace: true,
template: '<div>{{title}}</div>'
};
});
</script>
HTML:
<div ng-controller="Ctrl">
<my-dir><h3>some existing content</h3></my-dir>
</div>
여기 Plunker에서 확인:
http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview
가지고 있을 때replace: true
다음과 같은 DOM을 얻을 수 있습니다.
<div ng-controller="Ctrl" class="ng-scope">
<div class="ng-binding">hello</div>
</div>
반면, 와 함께replace: false
다음과 같이 표시됩니다.
<div ng-controller="Ctrl" class="ng-scope">
<my-dir>
<div class="ng-binding">hello</div>
</my-dir>
</div>
그래서...replace
property in directives는 디렉티브가 적용되는 요소가 있는지 여부를 나타냅니다.<my-dir>
(이 경우)은 남아 있어야 합니다.replace: false
명령어 템플릿은 그 자식으로 추가되어야 합니다.
또는
지침이 적용되는 요소를 교체해야 한다.replace: true
를 참조해 주세요.
어느 경우든 (지시가 적용되는) 요소는 소실됩니다.요소의 원래 내용/하위를 유지하려면 요소를 변환해야 합니다.다음 지시문이 이를 수행할 수 있습니다.
.directive('myDir', function() {
return {
restrict: 'E',
replace: false,
transclude: true,
template: '<div>{{title}}<div ng-transclude></div></div>'
};
});
이 경우 지시문 템플릿에 속성을 가진 요소가 있는 경우ng-transclude
그 내용은 (지시가 적용되는) 요소의 원래 콘텐츠로 대체됩니다.
변환의 예를 참조해 주세요.http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview
번역에 대한 자세한 내용은 여기를 참조하십시오.
replace:true
권장되지 않음
문서에서:
replace
([사용 중지됨])는 다음 메이저릴리즈(v2.0)에서 삭제될 예정입니다.템플릿의 대체 대상을 지정합니다.디폴트:
false
.
true
- 템플릿이 디렉티브의 요소를 대체합니다.false
- 템플릿이 디렉티브 요소의 내용을 대체합니다.
-- 각진 모습JS 종합 지시 API
GitHub에서:
케이텝- 이건 더 이상 추천되지 않는 이유죠.
replace: true
그 중 상당수는 합리적인 방법으로 고칠 수 없습니다.이러한 문제를 주의해서 회피하면 파워가 높아집니다만, 새로운 유저의 이익을 위해서, 「이것이 골칫거리입니다.하지 마세요」라고 말하는 것은 간단합니다.
갱신하다
주의:
replace: true
는 권장되지 않으며 주로 여기에 나열된 문제로 인해 사용을 권장하지 않습니다.새 Angular에서 완전히 제거되었습니다.
교환에 관한 문제: true
상세한 것에 대하여는, 을 참조해 주세요.
언급URL : https://stackoverflow.com/questions/22497706/how-to-use-the-replace-feature-for-custom-angularjs-directives
'programing' 카테고리의 다른 글
React에서 JSON 파일 가져오기 (0) | 2023.03.06 |
---|---|
Gson 옵션 및 필수 필드 (0) | 2023.03.06 |
Angular 2의 http.get()을 사용하여 로컬 파일에서 JSON 콘텐츠를 로드합니다. (0) | 2023.03.06 |
사용자 정의된 플러그인의 wordpress admin에 페이지 번호 추가 (0) | 2023.03.06 |
얕은 테스트 효소 Reactjs를 사용하여 useLocation() 경로 이름을 어떻게 시뮬레이션합니까? (0) | 2023.03.06 |