다음 HTML 조각을 고려 각도

Question

바인드 값에 트리밍 방지하는 방법 :

myFilters.filter('paddednumber', function() { 
    return function (value, width, decimals) { 
     if (value === undefined) return; 
     var result = value.toFixed(decimals); 
     while (result.length < width) { 
      result = ' ' + result; 
     }; 
     return result; 
    }; 
}); 

가 어떻게에서 각도 방지 않습니다 paddednumber가 선행 공백을 추가하는 필터가

<div class="text-center"> 
    <h3>LAeq: <span class="monospace"><strong>{{ Laeq | paddednumber : 7 : 2 }}</strong></span> dB</h3> 
</div> 

필터가 추가 한 주요 공백은 다듬을 수 있습니까? 는 내가 텍스트 영역 및 입력 지시에 대한 NG-트림 옵션을 찾았지만, 샘플의 Laeq은 위의 $ 리소스에 바인딩하고 서식 권리를 얻기 위해 필터를 적용 할 필요가있다. 물론 컨트롤러에서 서식을 지정하고 ng-textarea 범위에서 서식이 지정된 값에 바인딩 할 수 있지만 내 HTML 코드에서 간단한 솔루션을 기대하고있었습니다.

Answer 1

각도는 선행 공백을 없애주는 것이 아니며, 브라우저의 책임입니다. 예를 들어, this example 고려 :

<div> 
    Hello <span>    
           Han</span> 
</div> 

이 순수 HTML (어떤 각도) 인, 브라우저가이 태그를 렌더링 할 때 당신이 볼 수있는 브라우저가 될 때까지 표시 모든 공백, 캐리지 리턴과 탭을 무시 다음 태그 또는 텍스트 블로그. 이것은 모든 브라우저의 표준 동작입니다.

예를 들어이 동일한 페이지를 마우스 오른쪽 버튼으로 클릭하고 "페이지 소스보기"옵션을 선택하면 무시할 공간, 탭 및 캐리지 리턴이 많이 있음을 알 수 있습니다. 다음과 같은 것을 찾을 수 있습니다 :

     <a href="/review" title="Review queues - help improve the site"> 
          review 
         </a> 

브라우저에서 무시되는 모든 문자가 나타 납니까?

브라우저에 구체적으로 말하고 싶을 때 : "이봐, 이걸 내가 렌더링하기 원하는 공백"이라고하면이 기호를 사용할 수 있습니다 :  , 이런 식으로 사용하고 싶은 것입니다 .

그러나 맞춤 필터에서 해당 기호 ( )를 렌더링하려면 \u00A0 인 unicode equivalent을 사용해야합니다. 나는이 같은 필터를 변경 한 이유

는 :

.filter('paddednumber', function() { 
    return function (value, width, decimals) { 
     if (value === undefined) return; 
     var result = value.toFixed(decimals); 
     var spacesToAdd = width-result.length; 
     for(var i=0;i<spacesToAdd;i++) 
      result = '\u00A0' + result;   
     return result; 
    }; 
}); 

Working Example