programing tip

AngularJS 지시문에서 '대체'속성이 더 이상 사용되지 않는 이유는 무엇입니까?

itbloger 2020. 8. 6. 08:02
반응형

AngularJS 지시문에서 '대체'속성이 더 이상 사용되지 않는 이유는 무엇입니까?


API docs 에 따르면 지시문의 replace속성은 더 이상 사용되지 않으므로 앞으로 모든 지시문은 현재 기본값 인으로 작동합니다 replace: false.

이로 인해 개발자는 요소 지시문 요소를 대체 할 수 없으며이 기능을 대체 할 필요가 없습니다.

요소 지시문 있거나없는 요소 지시문의 예는 이 플 런크참조하십시오 replace: true.

대체로이 유용한 속성이 더 이상 사용되지 않는 이유는 무엇입니까?


최신 정보

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

실물

이 변경 사항은 다음과 같습니다. https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb

현재 replace있는 요소를 대체하는 지시문을 정의하기위한 플래그는 다음 주요 각도 버전에서 제거됩니다. 이 기능은 시맨틱이 어려우며 (예 : 속성을 병합하는 방법) 해결하는 것보다 더 많은 문제가 발생합니다. 또한 WebComponents를 사용하면 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에서 :

Caitp-- 에 알려진 매우 어리석은 문제가 있기 때문에 더 이상 사용되지 않습니다. 그 중 replace: true상당수는 실제로 합리적인 방식으로 고칠 수 없습니다. 조심하고 이러한 문제를 피한다면 더 많은 힘을 얻을 수 있지만 새로운 사용자를 위해 "이것은 두통을 유발할 것입니다."라고 말하는 것이 더 쉽습니다.

- AngularJS와는 실행 # 7636

replace:true 더 이상 사용되지 않습니다

문서에서 :

replace ([DEPRECATED!], 다음 주요 릴리스에서 제거됩니다 (예 : v2.0))

템플릿을 대체 할 내용을 지정하십시오. 기본값은 false입니다.

  • true -템플릿이 지시문의 요소를 대체합니다.
  • false - the template will replace the contents of the directive's element.

-- AngularJS Comprehensive Directive API


I'd say it's a good thing that is has been removed because it prevents you from exposing inner workings of a directive (component) to the outside world. Look at your template as being a shadow DOM and compare your directive with normal HTML elements like a button You don't see all kinds of classes being added and styling being applied to those elements either when you hover or click them. It's all 'hidden' inside. Because support for shadow DOM is somewhat limited at the moment it is kind of a workaround but it already enables you to be future proof.

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

반응형