HTML을 사용자 지정 지시문에 전달

Question

저는 각도가 너무 새롭습니다. CRUD 기능과 같은 기능이있는 테이블을 쉽게 만들려고 노력하고 있습니다. 예를 들어

:

나는 다음과 같은 선언이 있습니다

<custom-table datasource="persons" headers="headers"> 
     <custom-column header="header" display-member=""/> 
     <custom-column header="header" display-member=""/> 
</custom-table> 

느릅 나무 내 사용자 정의 테이블이 지시 느릅 나무는 테이블 요소를 반환입니다. 문제는, 내가 테이블의 헤더와 본문을 구축하기 위해 모든 컬럼을 읽어야 만하지만, 내가 지시어의 내용으로 전달한 컬럼을 읽는 방법을 알 수 없다 ... (나는 노력하고있다. 가능한 적은 jquery 사용)

내가 그것을 얻을 수있는 유일한 방법은 각 열을 구분 된 읽었지만,이 일을, 내가 제대로 테이블을 만들 수 없을 것입니다. 내가 상상하는 시나리오는 모든 컬럼 선언을 읽고, 테이블 헤더를 만들고, ng-repeat을 바디에 넣는 것입니다.

도움이 필요하십니까?

Answer 1

지시문의 내용 (열 정의)을 얻으려면 몇 가지 작업을 수행 할 수 있습니다. 하지만 이것은 각도의 고급 사용법이며 다음과 같이 원하는 것을해야하는지 확실하지 않습니다.

1 - innerHtml을 컴파일하는 데 transclude 함수를 사용하십시오. 지시어 링크 함수는 5 번째 인수로 transcludeFn을 수신 할 수 있습니다.이 함수를 사용하면 지시문 안에있는 내용을 컴파일하고 원하는대로 사용할 수 있습니다.

2 - 사용자 지정 문에 대한 컴파일 기능을 구현합니다. 컴파일 함수는 html을 수신하고이를 쿼리하여 innerHtml을 추출 할 수 있습니다.

동일한 문제를 해결하려면 지시어 내용을 찾는 대신 테이블 열 지시문을 사용하는 것이 좋습니다.

각도 Ui/부트 스트랩 프로젝트가 자식 탭과의 관계 및 상대방과의 관계에 대해 tabs component을 구현 한 방법을 살펴볼 수 있습니다.

Answer 2

이 목적을 위해 지시문을 만드는 것이 유리하다고 생각하지만, 즉석에서 테이블을 작성하는 방법은 어떨까요? Here's a codepen

<table> 
    <thead> 
    <tr> 
     <th ng-repeat="value in table.data.headers">{{value}}</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in table.data.body"> 
     <td ng-repeat="property in item">{{property}}</td> 
    </tr> 
    </tbody> 
</table>