AngularJS 지시어, 내용 줄 바꾸기 및 원본 요소의 속성 유지

Question

저는 AngularJS에서 새로운 점을 알고 있습니다.

지시문이 적용되는 요소 (및 해당 하위 요소)를 래핑하는 지시문을 만드는 데 약간 문제가 있습니다. 저는이 겉으로보기에는 일반적인 시나리오가 AngularJS에 다른 많은 평범한 것들이 얼마나 쉬운지를 고려하면 왜 그렇게 어려워해야하는지 알지 못합니다. 그래서 여기에 뭔가 빠져 있다는 것이 아주 잘 들릴 수 있습니다.

내가 원하는 것은 div에 select 요소를 래핑하는 것이다. 원래 선택 요소와 내용을 보존하기 위해 transclude를 사용하고 있지만 제대로 작동하지 않습니다.

<select mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"></select> 

을 ... 그리고 나의 지침은 다음과 같습니다 :

HTML은 다음과 같습니다

directiveModule.directive("mlbSelect", function(){ 
    return { 
     template: '<div class="mlb-select">' 
        + '<select ng-transclude></select>' 
        + '</div>', 
     transclude: 'element', 
     replace: true 
    } 
}); 

결과 HTML은 다음과 같습니다 : 물론

<div class="mlb-select ng-pristine ng-valid" mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"> 
    <select ng-transclude class="ng-scope"></select> 
</div> 

, 이것은 내가 원하는 것이 아닙니다. 왜 select 요소의 속성이 ng-transclude 속성으로 지정한 요소가 아닌 래핑 div에 추가 되었습니까? select 요소는 ng-options 및 ng-model 속성을 유지해야합니다.

이 작업을 수행하려면 어떻게해야합니까? 이 작업을 수행 할 수있는 유일한 방법 AFAIK

Answer 1

는 youe 경우 위와 같이 정확하게 할 경우,이 일을 아무 문제가 없을 물론

<div mlb-select> 
    <select ...></select> 
</div> 

:, 래퍼 요소에 예컨대을 트랜스 클루 전을 가진 지시어를 지정하는 것입니다. 이 질문의 맥락에서

트랜스 클루 전은 약으로 작동합니다

1. 의 매개자 내용이 transclude: true와 지시어가있는 요소의 내용이다; 귀하의 경우 <select>의 내용이 비어 있습니다.
2. 변환 된 내용은 지시문의 템플리트에 ng-transclude을 지정하는 요소 안에 위치합니다.