2014-12-18 3 views
-1

Я новичок в угловой, и я пытаюсь сделать что-то на работе, чтобы легко создавать таблицы с функциональностью, такими как функции CRUD.Передача HTML в пользовательскую директиву

Например:

У меня есть следующее заявление:

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

Wich мой заказ таблица является директива которым возвращает элемент таблицы. Проблема в том, что я должен прочитать ВСЕ столбцы, чтобы построить заголовок и тело таблицы, но я не могу понять, как я могу читать столбцы, которые я передал как содержимое директивы ... (я пытаюсь использовать как можно меньше jquery)

Единственное, что я мог достичь, это прочитать каждый столбец, разделенный, но при этом я не смогу правильно построить таблицу. Сценарий, который я воображаю, читает все объявления столбца, строит заголовок таблицы и помещает ng-repeat для тела.

Любая помощь будет оценена.

+0

не понимая контекста вопроса совершенно необходимо больше колокольчика. Но 1-е наблюдение за наложением пользовательских директив должно быть на уровне шаблона директивы, а не на уровне index.html. 3 других свойства DDO (функции) приходят в голову, чтобы помочь, как показано ниже: transclude; область (изолировать или не изолировать); replace (true или false для фактического размещения html-рендеринга на индексной странице) не уверен, что это поможет предоставить доступ к 'read ALL' – jamie

ответ

1

Чтобы получить содержание вашей директивы (определения столбцов), вы можете сделать пару вещей. Но это некоторое расширенное использование углового и не уверен, что вы должны делать то, что хотите, таким образом:

1 - Используйте функцию трансключения для компиляции innerHtml. Ваша функция директивной ссылки может принимать transcludeFn в качестве 5-го аргумента, эта функция позволяет вам скомпилировать все, что находится внутри вашей директивы, и использовать ее по своему усмотрению.

2 - Реализация функции компиляции для вас. Функция компиляции получит html, и вы можете запросить его для извлечения innerHtml.

Если бы я решал ту же проблему, вместо поиска содержимого директивы, я бы скорее сделал директивы столбцов таблицы.

Возможно, вы захотите посмотреть, как проект угловой-Ui/bootstrap реализовал tabs component относительно его отношения с дочерней вкладкой и как они разговаривают друг с другом.

0

Я думаю, что есть смысл создавать директивы для этой цели, но как насчет просто построения таблицы на лету. 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> 
Смежные вопросы