[angularjs] 사용자 정의 AngularJS 지시문에 ‘대체’기능을 사용하는 방법은 무엇입니까?

Program / 글쓴이

이유는 무엇입니까 replace=true또는 replace=false아래의 코드에 영향을주지?

replace = false 일 때 “일부 기존 컨텐츠”가 표시되지 않는 이유는 무엇입니까?

아니면 좀 더 겸손하게 말하면 replace=true/false지시문 의 기능과 사용 방법을 친절하게 설명해 주 시겠습니까?

예

JS / Angular :

<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지시문 의 속성은 지시문이 적용되는 요소 ( <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경우 해당 내용 은 해당 요소 (지시문이 적용되는)의 원래 내용으로 대체됩니다.

translusion의 예를 참조하십시오 http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

translusion에 대해 자세히 알아 보려면 이것을 참조하십시오 .

답변

replace:true 더 이상 사용되지 않음

문서에서 :

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

템플릿으로 대체해야하는 항목을 지정합니다. 기본값은 false.

  • true -템플릿이 지시문의 요소를 대체합니다.
  • false -템플릿이 지시문 요소의 내용을 대체합니다.

– AngularJS와 포괄적 인 지침의 API

GitHub에서 :

Caitp–에 대해 알려진 매우 어리석은 문제가 있기 때문에 더 이상 사용되지 않습니다.이 중 replace: true상당수는 합리적인 방식으로 해결할 수 없습니다. 주의해서 이러한 문제를 피하면 더 많은 권한을 얻을 수 있지만 신규 사용자의 이익을 위해 “이렇게하면 골치 아픈 일 이니,하지 마세요”라고 말하는 것이 더 쉽습니다.

– AngularJS와는 실행 # 7636

최신 정보

참고 : replace: true주로 여기에 나열된 문제로 인해 더 이상 사용되지 않으며 사용하지 않는 것이 좋습니다. 새로운 Angular에서 완전히 제거되었습니다.

교체 문제 : true

자세한 내용은

답변