Манипулирование DOM в AngularJS вне директивы?

Question

Этот plunkr иллюстрирует выпуск AngularJS имеет определенные HTML-элементы (в частности таблицы ре: gist --this почему ui.bootstrap.collapse не работает с таблицами либо)

Как вы можете видеть из plunkr, я может скрыть и удалить статические строки в порядке, но сгенерированные строки, через ng-repeat, не работают. Использование ng-transclude также не затрагивает проблему, так как браузер будет изменять порядок узлов или удалять узлы, у которых нет соответствующих корневых элементов.

Ядро того, что я хотел бы сделать, это создать расширяемые строки в таблице. Каждое расширение представляет собой достаточно сложную структуру таблицы, которая включает в себя вложенные `нг-повторы

Я знаю, я мог переписать мои таблицы Div с таблицы стилизации, или пытаться создать директиву для таблицы расширения, но мне кажется, как тонну дополнительной работы только по существу есть это:

<tr onclick="$('#exp').toggle()"> 
    <td>1</td> 
</tr> 
<tr id='exp'> 
    <td>2</td> 
</tr> 

Так есть альтернатива, идиоматический Угловой способ установки OnClick обработчиков без всех этих хлопот, или я просто говорю «eff it Dude, lets go bowling,» и просто провод вверх по onclick в моем html.

Answer 1

Вы можете использовать ng-hide (или ng-show) для простого скрытия & show boolean logic. И для применения пользовательского класса на «щелкнуло» строки вы можете использовать нг-класс:

<table> 
    <tr ng-click='hideRow2 = !hideRow2' ng-class="{active: !hideRow2}"> 
    <td>1</td> 
    </tr> 
    <tr ng-hide="hideRow2"> 
    <td>2</td> 
    </tr> 
    <tr ng-click='hideRow4 = !hideRow4' ng-class="{false: 'active', true: 'default'}[hideRow4]"> 
    <td>3</td> 
    </tr> 
    <tr ng-hide="hideRow4"> 
    <td ng-repeat='e in els'>{{e}}</td> 
    </tr> 
</table> 

Plnuker