지시문을 사용하여 내용 줄 바꾸기 및 transclude

Question

여러 div가 포함 된 래퍼로 둘러싸고 입력하고 싶습니다. 나는 "my-content"라는 div 안에 입력을 넣기를 원할 것이다. 이를 달성하기 위해 지시문을 사용하고 있지만 래퍼 내부에 배치되지 않았습니다.
이것은

<div class="wrapper" > 
    <div class="left-side" > </div> 
    <div class="middle"> 
    <div class="top-side"> </div> 
    <div class="my-content" ng-transclude ></div> 
    <div class="bottom-side"> </div> 
    </div> 
    <div class="right-side"> </div> 
</div> 

작동하지 않습니다하지만이

<div class="wrapper" > 
    <div class="left-side" > </div> 
    <div class="middle"> 
    <div class="top-side"> </div> 
    <input class="my-content" ng-transclude /> 
    <div class="bottom-side"> </div> 
    </div> 
    <div class="right-side"> </div> 
</div> 

지침과 같은 정의 작동 :

이 내가 시도 템플릿은

app.directive('wrapMe', function(){ 

    return { 
     restrict: "A", 
     templateUrl: 'template.html', 
     transclude: true, 
     replace: true 
    }; 

}); 

을 지금에 다시 말해, wrap-me 지시어가 p이면 무엇이든하고 싶습니다. div 안에 'my-content'class와 ng-transclude가 포함되어 있습니다. 내가 여기서 뭔가를 놓치고 있니?

Plunker 링크 : http://plnkr.co/edit/oQtWNCBBuc61bRwzDjHP?p=preview

Answer 1

당신은 거의 다 왔어. transclude 옵션을 element으로 변경하면 완료됩니다. 기본적으로 input 요소와 해당 내용을 모두 transcluded해야합니다. 이전 옵션 (transclude: true)은 비어있는 내용 만 변환하여 작동하지 않습니다.

app.directive('wrapMe', function(){ 

    return { 
     restrict: "A", 
     templateUrl: 'template.html', 
     transclude: 'element', 
     replace: true 
    }; 

}); 

업데이트 plunkr : http://plnkr.co/edit/IX0ELKR4wKOPtt2vO6FB?p=preview