Угловая директива молча терпит неудачу (директива вынесена слишком рано?)
У меня есть приложение Angular с пользовательской директивой элемента (<uber-table>
). <uber-table>
предполагается взять коллекцию объектов, сделать их <table>
и добавьте некоторые функциональные возможности (щелкните строку, чтобы переключить базовый объект как выбранный, окно поиска для фильтрации в реальном времени, ссылки на действия в каждой строке с настраиваемым обратным вызовом (кликами) для каждого объекта). Я создал Plunker с соответствующим кодом. Обратите внимание, что Plunker выдает ошибку о map
(Object [object Object] has no method 'map'
), но локально я не получаю никаких ошибок.
Функция пост-ссылки element
параметр не является <uber-table>
элемент, как я ожидал. Вместо этого это шаблон <div class="uber-table">
элемент. Это мешает мне извлекать данные из <uber-table>
, Что я делаю неправильно? Любая помощь будет высоко ценится.
2 ответа
Вот краткое изложение некоторых вопросов.
Первая главная проблема - вы хотите, чтобы существующий контент уже находился в uber-table
существует разметка, а также новый шаблон. Если не указано иное существующего контента (columns
) в этом случае будут перезаписаны. Чтобы включить существующий контент в директиву с шаблоном, вам необходимо установить transclude:true
затем определите в шаблоне, где этот существующий контент должен быть размещен с использованием ng-transclude
на элементе, который будет родительским для содержимого.
Вот демо с исправлением transclude
Новые проблемы возникают сейчас, когда вы пытаетесь использовать JQuery для цикла columns
и вернуть угловой attrs
=> column.attrs
, Это бросает неопределенную ошибку.
Я не пытался разобраться в этом достаточно, чтобы разобраться с проблемами столбцов. Скорее всего, они должны обрабатываться по собственной директиве
ОБНОВЛЕНИЕ: вот немного исправленная безошибочная версия, использующая jQuery для анализа количества столбцов. Боюсь, меня все еще немного смущает структура этого. Я не вижу необходимости использовать jQuery для разбора столбцов, это можно преобразовать в директиву или передать определения столбцов в основную директиву из области видимости контроллера
Попробовав несколько вещей и снова посмотрев документацию, я наконец-то получил ее. Решение было поставить post-link
функция внутри compile
функция. Также мне пришлось обновить свою изолированную область для использования =
, задавать replace
в true
и установить transclude
в 'element'
,
Я обновил Plunker, если кто-то хочет увидеть изменения. Версия Plunker не работает, но, поскольку она работает локально, я не собираюсь тратить на нее слишком много времени.