Существует компонент таблицы, который берет имена столбцов и строк с данными, которые я хочу отобразить в таблице. Но не всегда данные представляют собой простой текст. Иногда я хочу добавить свою собственную директиву.
Например, есть контроллер с собственным шаблоном, в который я хочу добавить свой собственный компонент таблицы. В контроллере я устанавливаю данные, которые хочу передать в таблицу:
ctrl.tableData = [
{ name: 'Alex', age: '34', mobile: '<my-directive ng-model="ctrl.mobile">' }
];
Затем в шаблоне я отправляю эти данные в таблицу:
<my-table-component data="ctrl.tableData"></my-table-component>
Ну, в компоненте my-table-component рисуется таблица:
<table>
<tr ng-repeat="row in ctrl.data">
<td ng-repeat="column in ctrl.columns">{{ row[column] }}</td>
</tr>
</table>
При такой реализации таблицы я не могу вставить директиву, поскольку она будет вставлена просто текстом. Для этого я создал дополнительную директиву, которая компилирует директивы. Пусть его имя будет my-table-directive. Это делает следующее:
function link (scope, element, attrs) {
const columnElem = angular.element(element);
let columnChild = attrs.columnValue;
if (attrs.columnValue.startsWith('<')) {
columnChild = $compile(columnChild)(scope);
}
columnElem.append(columnChild);
}
И шаблон моей таблицы немного изменился:
<td ng-repeat="column in ctrl.columns">
column-value={{row[column]}}
my-table-directive></td>
Кажется, все в порядке. Но проблема в том, что директива вообще не компилируется с ожидаемой областью действия :)
Естественно, я хочу изменить свойство mobile в моем самом верхнем эскизе, где я установил ctrl.tableData. А с текущей реализацией директивы ng-model, my-directive запишет данные в свойство mobile моей области видимости <td> в таблице.
Может быть, мое решение не совсем верно? Не могли бы вы как-то организовать вставку директив в таблицу компонентов другим способом? Задача кажется популярной, но с Google ничего не случилось. Помогите мне, пожалуйста:)