source

Angular에서 '바꾸기' 속성이 더 이상 사용되지 않는 이유는 무엇입니까?JS 디렉티브?

ittop 2023. 4. 2. 11:52
반응형

Angular에서 '바꾸기' 속성이 더 이상 사용되지 않는 이유는 무엇입니까?JS 디렉티브?

API 문서에 따르면 디렉티브는replaceAtribute는 권장되지 않으므로 향후 모든 디렉티브는 현재 기본값인replace: false.

이로 인해 개발자가 요소 지시문의 요소를 교체할 수 없게 되고, 이 기능을 대체할 명백한 기능은 없습니다.

요소 지침의 사용 여부와 관계없이 작동하는 방법의 예는 이 플랭크를 참조하십시오.replace: true.

이 유용한 Atribut이 대체되지 않고 폐지되는 이유는 무엇입니까?

갱신하다

공동작업자 중 한 명이 제거되지 않을 것이라고 했지만 알려진 버그는 수정되지 않습니다.https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb#commitcomment-8124407

원래의

이 변경에 대한 커밋은 다음과 같습니다.https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb

replace해당 요소가 있는 요소를 대체하는 지시사항을 정의하는 플래그는 다음 주요 각도 버전에서 제거됩니다.이 기능에는 어려운 의미론(속성의 Marge 방법 등)이 있어 해결 방법에 비해 더 많은 문제가 발생합니다.또한 Web Components에서는 보통 DOM에 커스텀 요소가 있습니다.

복잡성과 지원을 유지하기 위한 이점을 조합한 것처럼 들립니다.

dev가 이것을 사용하는 이유 중 하나는 의미론적으로 올바른 마크업을 선호하기 때문에 커스텀 디렉티브태그를 대체했기 때문입니다.


그 링크의 아래쪽에 있는 코멘트를 읽어보면 많은 사람들이 그것을 유지하기를 원하는 것 같다.

그게 두렵다면replace: true다음 버전에서 삭제될 예정입니다.postCompile기능을 사용하여 동작을 복제합니다.

/// Replace element with it's first child
Utils.replaceWithChild = function(element) {
    var child = angular.element(element[0].firstChild);
    Utils.mergeAttributes(element, child);
    element.replaceWith(child);
}

/// Copy attributes from sourceElement to targetElement, merging their values if the attribute is already present
Utils.mergeAttributes = function(sourceElement, targetElement) {
    var arr = sourceElement[0].attributes;
    for(var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if(!item.specified)
            continue;

        var key = item.name;
        var sourceVal = item.value;
        var targetVal = targetElement.attr(key);

        if(sourceVal === targetVal)
            continue;

        var newVal = targetVal === undefined
            ? sourceVal
            : sourceVal + ' ' + targetVal;

        targetElement.attr(key, newVal);
    }
}

angular.module('test')
.directive('unwrap', function() {
    return {
        restrict: 'AE',
        templateUrl: 'unwrap.part.html',
        compile: function() {
            return function postCompile(scope, element, attr) {
                Utils.replaceWithChild(element);
            };
        }
    }; 
});

GitHub에서:

케이텝- 이건 더 이상 추천되지 않는 이유죠.replace: true그 중 상당수는 합리적인 방법으로 고칠 수 없습니다.이러한 문제를 주의해서 회피하면 파워가 높아집니다만, 새로운 유저의 이익을 위해서, 「이것이 골칫거리입니다.하지 마세요」라고 말하는 것은 간단합니다.

-- 각진 모습JS호 7636

replace:true되었습니다.

문서에서:

replace- 0([V2.0])에서될 예정입니다.

템플릿의 대체 대상을 지정합니다.은 "" 입니다.false.

  • true 요소를 - 템플릿이 디렉티브 요소를 합니다.
  • false - 템플릿이 지시어 요소의 내용을 대체합니다.

-- 각진 모습JS 종합 지시 API

참고 항목 - 사용자 정의 각도 설정에 '바꾸기' 기능을 사용하는 방법JS 디렉티브?

지령(구성 요소)의 내부 작업을 외부에 노출시키지 않기 때문에 제거된 것은 좋은 일이라고 생각합니다.템플릿을 섀도 DOM으로 보고 지시문을 버튼과 같은 일반 HTML 요소와 비교합니다. 마우스를 움직이거나 클릭할 때 이러한 요소에 모든 종류의 클래스가 추가되거나 스타일링이 적용되는 것은 아닙니다.안에 다 숨겨져 있어요.섀도 DOM의 지원은 현시점에서는 다소 제한적이지만, 이미 장래에 대비할 수 있습니다.

언급URL : https://stackoverflow.com/questions/24194972/why-is-replace-property-deprecated-in-angularjs-directives

반응형