중첩 된 지시문의 너비를 기준으로 텍스트 변경 각도

Question

데이터 객체를 반복하고 목록 지시문에 표시하는 ng-repeat가 있습니다. 목록의 오브젝트 중 하나는 텍스트 요소의 길이가 컨테이너의 길이와 같거나 초과 할 때 축약 된 버전을 사용해야합니다. 그래서 내가 가진 것은 이것이다 :

//this is the list directive 
<shift-list selection="selection" shifts="shifts"></shift-list> 

//this is the template of the list directive that adds site-base-name directive 
<ion-item collection-repeat="shift in shifts"> 
<div class="item-text"> 
<site-base-name shift="shift"></site-base-name> 
</div> 

//and here is what my site-base-name directive looks like 
return { 
     restrict: 'E', 
     link: function(scope, element) { 
      $timeout(function(){ 
       scope.siteBaseWidth = element[0].offsetWidth; 
       scope.parentWidth = element.parent()[0].offsetWidth; 
      }); 
     }, 
     replace: true, 
     scope: { 
      shift: '=' 
     }, 
     template: ''+ 
     '<div class="sitebase">{{(siteBaseWidth + 20 >= parentWidth) && shift.sites_abbreviation || shift.sites_name }} : {{shift.bases_name}}</div>' 

    } 
} 

그래서 내가 요소 및 부모의 크기를 찾는 다음 목록 지시어 내부 지침 site-base-name을 내포하고하고 있어요. 크기가 내 조건 (siteBaseWidth + 20 >= parentWidth)을 초과하는 경우 이름의 축약 된 버전 (shift.sites_abbreviation)을 사용하고 있습니다. 이 문제는 내가 받고있는 동작이 버그가 있고 일관성이 없다는 것입니다. 또한 DOM이로드 된 후 변경 사항을 적용하므로 창 내에서 텍스트가 변경된 것을 볼 수 있습니다.

내 질문은 텍스트 요소와 부모 요소의 너비를 찾고 그런 다음 바인딩을 채울 데이터를 결정하는 조건을 적용하는 가장 좋은 방법은 무엇입니까? 바람직하게는 깨끗한 각막 솔루션.

Answer 1

요소에 의존하여 offsetWidth은 DOM을 업데이트 할 때까지 기다리는 것처럼 강력하지 않으므로 (따라서 $timeout 및 깜박임이 관찰 됨).

문제를 해결하는 가장 저렴한 방법은 처음에는 0.01의 불투명도로 텍스트를 표시하는 것입니다 (보이지는 않지만 여전히 약간의 공간이 필요함). 사이트베이스 이름 지시문을 사용하면 크기를 조정하고 텍스트를 조정하면 불투명도를 다시 1로 설정할 수 있습니다.

더 나은 해결책은이 $ timeout 및 offsetWidth를 제거하는 것입니다. 고정 폭 글꼴을 사용하는 경우, 문자열이 표시되기 전에 string.length times pixelsPerCharacter를 계산할 수 있습니다.