Access директива элемент из контроллера

На моей странице у меня есть таблица с пользовательской директивы, которая показывает детальный вид ROW элемента, когда пользователь нажимает на кнопку детали:Access директива элемент из контроллера

<table ng-controller="MyController"> 
     <tr ng-repeat="item in controller.items"> 
     <td>{{item.name}}</td> 
     <td> <a href="#" ng-click="controller.loadDetails(item.id)">details</a> 
     </td> 
     </tr> 
     <tr ng-details details-colspan="2" ng-model="controller.details"></tr> 
</table>

Директива:

.directive('ngDetails', function() { 
    return { 
     restrict: 'A', 
     require: "^ngModel", 
     replace: true, 
     template: '<tr class="detailsTemplate {{ngModel.cssClass}}"> \ 
         <td colspan="{{detailsColspan}}" ng-bind-html="ngModel.data"></td> \ 
        </tr>', 
     scope: { 
      detailsColspan: '@', 
      ngModel: '=' 
     } 
    } 
});

Вот demo.

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

источник

2015-07-16 Maksim Vi.

Вместо того, чтобы иметь строку сведений, отображаться только один раз и перемещаться, пусть ng-repeat включает ее для каждой строки. Вы можете сделать это, используя ng-repeat-start на первых <tr> и ng-repeat-end на последних <tr>. Этот специальный синтаксис позволяет повторять произвольные множества элементов без содержания в одном и том же повторяющемся элементе. Затем вы можете включить ng-hide, ng-show или, возможно, ng-if на элемент директивы, который будет отображаться только при нажатии соответствующей строки.

Дополнительная информация о ng-repeat-start/end syntax can be found here.

источник

2015-07-16 22:08:31 Zimzat

Мне нравится обходной путь, это проще, но загрязнение DOM с дополнительным элементом строки для каждого элемента не похоже на лучший подход. –

Если вы используете 'ng-if', то дополнительная строка не будет создана до тех пор, пока условие не будет выполнено и будет удалено, когда условие больше не будет выполнено. Недостатком является ng-if создает отдельную область, хотя, поскольку это директива с явной областью, которая не является большой проблемой. Если вы не имеете дело с тысячами строк, отображаемых сразу, то производительность вряд ли будет проблемой даже при использовании 'ng-show'. – Zimzat

hmm, выглядит как 'ng-if' может быть то, что я ищу. Есть ли способ анимировать элемент, когда он добавляется/удаляется с помощью 'ng-if'? –

Нельзя получить доступ к элементу внутри вашего контроллера. Если вам нужно это сделать, то есть что-то не так с вашим дизайном приложения или вашим пониманием самого Углового.

На общем уровне вы должны начать думать о своих директивах как клей между HTML и бизнес-логикой (ваш реальный код JS внутри ваших сервисов, библиотек, моделей и т. Д.), И будьте очень строги в том, чтобы держать его в этом путь.

В данном конкретном случае, вы могли бы думать о всей нг-повторе в рамках одной директивы, и включать подробную строку между каждыми элементами строками.

Еще лучше, если для показа строки детали требуется какое-то действие от пользователя, например, щелчок по строке позиции, вы можете динамически добавлять/удалять строку с деталями непосредственно под нажатой строкой элемента. Это будет немного более оптимальным, поскольку детализированные данные будут «ленивыми» скомпилированы.

источник

2015-07-16 22:11:20

Access директива элемент из контроллера

ответ

Смежные вопросы