Как в контроллере компонента получить htmlNode текущего компонента?

Question

[Владимир]

Вот пример codepen.io/anon/pen/XdvaaE
Почему то ссылка на $element[0] внутри контроллера елемента дает объект, вместо htmlNode, соответственно метод getElementById undefined. Как мне получить HTML ноду текущего компонента со всеми методами ?

Comments

[Николай]

вы уверены, что вам это надо?

[Владимир]

Я хочу посадить слушатель на событие animationend для элементов, которые создаются внутри компонента. Садить слушатель на каждый созданный элемент не по best practices, делать внутри компонента еще один объединяющий div , чтобы получить его по find то же как то не кошерно, зачем создавать еще один єлемент, которій не несет семантической нагрузки ?

[Alex]

а зачем GetElementById ? тем более без параметов ? это функция поиска. alert($element[0]) не?

[Владимир]

На самом деле проблема в том, что в рабочем коде я не могу отловить событие на элементе компонента, а в песочнице вполне
codepen.io/anon/pen/bpXorL

[Alex]

Владимир: а что делать по animationend и почему именно после него?

[Alex]

Владимир: В чем разница рабочего кода от песочницы? Верcия Angular? Что в консоли?

[Владимир]

Alex: Пока не могу понять, все версии совпадают. В рабочем коде я использую ng-repeat. После завершения анимации я начинаю отрабатывать новые тач ивенты

[Alex]

Владимир: мне кажется, логичнее на клик использовать $animate.addClass и его промисс использовать как завершение... или вообще animate https://docs.angularjs.org/api/ng/service/$animate

[Владимир]

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

[Alex]

Владимир: Если пользователь таскает элементы, то есть Angular Drag and drop библиотечка. Я как то помнится под себя её допиливал. Она позволяет события прямо в элементе прописывать, OnDragStart и т.д. и вешать на эти события свои обработчики.

[Владимир]

Спасибо

[Владимир]

Alex: Я повторил историю с невсплівающими ивентами в песочнице
codepen.io/casufi/pen/NrKbMy

Answer 1

[Николай]

1. getElementById определен только для document, внутри элемента можно использовать например getElementsByTagName или querySelector.
2. htmlNode это интерфейс, который имеется у HTMLElement, который вам отдается
3. если вам нужен доступ к DOM внутри контроллера - где-то вы зашли не туда скорее всего.

Comments

[Владимир]

Хотелось бы подробнее узнать про третий пункт. В каком месте отлавливать тач события для компонента ? https://docs.angularjs.org/guide/component

[Николай]

Владимир: в первом же абзаце есть подпункт : "When not to use Components". Там есть пункт про манипуляции с DOM. В данном случае вам стоит написать директиву, и внутри link функции выполнять все необходимые операции. Кстати вот: https://docs.angularjs.org/guide/directive где-то в середине есть пример draggable директивы.

[Владимир]

То есть если компонент имеет тач интерфейс, на него сверху нужно писать директиву которая этот интерфейс реализует ?

[Николай]

Владимир: вы можете написать общую директиву, которая будет лишь биндить на touch событие то что ей передадут через параметр. Для каждого компонента такая директива не нужна. выглядеть будет примерно так же как и стандартные ангулярские вещи: ng-click="ctrl.action()".

[Владимир]

Николай: А как это согласуется с "When not to use Components". и манипуляциями с дом ? Ведь реализация ctrl.action() будет в контроллере. Не могу пока у себя в голове сложить

[Николай]

Владимир: если бы вы точнее описали, чего пытаетесь сделать было бы проще. Если ctrl.action не трогает дом, а лишь что-то делает при событии - всё ок и можно её биндить через условную "ng-on-touch-event=ctrl.action()" директиву. Если в действии подразумеваются операции в DOM - они тоже должны быть выполнены внутри директивы. Тогда наша "ng-on-touch-event" нам не годится и нужно сделать директиву для этого конкретного случая.

[Владимир]

Я пітаюсь запаковать в компонент похожую штуку https://css-tricks.com/the-javascript-behind-touch...

Answer 2

[_ _]

А чем вам ngAnimate не угодила, кстати? Позволяет анимировать стили, возвращает promise. Сказали ей куда сколько чего анимировать, подписались на then - профит. А уж сколько в ней костыликов, чтобы везде более-менее ок работало...

Comments

[Владимир]

Я понял как рисовать анимацию основываясь на том, что она выдает, но как управлять анимацией я не понял. Не кинете пример ?

[Владимир]

По ходу не внимательно читал CSS + JS Animations Together