AngularJS 1.5 구성 요소 및 스타일링

저는 Flexbox 용 레이아웃 생성기를 만들고 있으며 AngularJS 1.5.7 구성 요소를 사용하고 있습니다. 기본적으로, 내 문제는 "대체"구성 요소에 존재하지 않지만 동적으로 내 구성 요소의 루트 요소를 스타일 수 싶습니다.AngularJS 1.5 구성 요소 및 스타일링

"flex"가 설정된 디스플레이가있는 기본 "div"가 있다고 가정 해보십시오. 버튼을 클릭하면이 "div"에 flexbox 레이아웃의 항목이 될 구성 요소가 추가됩니다. 생성 된 HTML은 다음과 같습니다

<div style="display:flex;"> 
    <item> 
    <div style="flex-grow:1;..."></div> 
    </item> 
</div>

내 문제는 스타일 "인 flexbox"는 "항목"요소처럼 예상대로 작동하지 않습니다 "DIV" 내부 은 "항목"요소에 적용되지만이다 플렉스 박스 관련 스타일링이 없다. 아이디어는 "item"구성 요소의 CSS 속성을 수정하는 데 사용되는 드롭 다운과 텍스트 상자가 있다는 것입니다. 이 하나의 템플릿은 다음과 같습니다

<div class="zone" data-ng-style="$ctrl.model.getStyle()"> ... </div>

그리고이 같은이 구성 요소 삽입 해요 : 다음

<item model="$ctrl.item"></item>

을, 내 질문은 "대안이 지침의 특성은 무엇을 '대체'하는거야? " 또는 "동적으로 구성 요소의 루트 요소 스타일을 지정하는 방법"을 참조하십시오.

감사

출처

2016-07-16 ssougnez

'component'는 웹 구성 요소와 마찬가지로 자체 포함 위젯으로 간주됩니다. 일단 컴파일되면 구성 요소 자체가 아닌 내용을 수정해야합니다. 귀하의 경우 지시어는 더 나은 선택입니다. – estus

replace는 지시어에도 사용되지 않으므로 원본 포스터 문제를 어떻게 해결해야하는지 궁금합니다. –

나는 (항상 분리 범위를 사용으로 인해 .component()에) 같은 .ng-isolate-scope 일부 각도 전용 클래스를 사용하는 방법에 대해 주저했다, 그러나 당신은 당신의 자신의 구성 요소에 대한 스타일을 제공 할 수있을 수있다 :

item { flex-grow: 1; }

요소에 특정한 클래스를 동적으로 적용하려면 동일한 패턴을 따를 수 있습니다.

item.selected { font-weight: bold; }

그럼에도 불구하고, 비록 그것이 오래된 IE 버전을 함께 할 수있는 방법을 준수 확실하지 않다.

출처

2016-10-21 15:07:44

AngularJS 1.5 구성 요소 및 스타일링

답변

관련 문제