Для чего и как применять директивы в AngularJS?

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

Я новичок в вэбе и не сделал ещё ни одного сайта, но цель моя и не они. Я пришел сюда чтобы применить знания полученные в gamedev в "мегасайтах", которые будут на половину состоять из canvas либо svg. Оговорюсь сразу, что можно было бы и на все сто процентов, но это много чего можно, но не значит лучше. И так вот когда я думаю о завтра, то начинаю сомневаться, что для правильного spa мне нужен angular. Ведь он может помочь только с dom, но не как не с canva (не знаю о svg по этому буду говорить только о canvas). Ведь для использования canvas мне нужно так же mvc, но не то компонентное, которое angular предоставляет.
По этому вывод - он только для микроприложений построенных.

И ещё он не нравится тем, что в нем отсутствует модель. Да, есть контроллер, котрый можно использовать как viewModel, но модели так и нет. Данные, которые должны находится в модели, размазаны по сервисам, а то и того хуже, фабрикам, что в свою очередь превращает программирование в процедурное.
Да, фабрика может хранить данные, сервис же должен только обрабатывать их (получать или что-то с ними делать), но в тот момент, когда я в viewModel'е хочу начать с ними работать, я должен их подтягивать из модели. Нет классической (от слова классика) модели, нет mvc.
А hmvc это нечто! Зачем вводить слой для связи контроллеров, когда они и так прекрасно общаются через mainController при помощи событий.
Вот частенько всплывают вопросы, можно ли одному контроллеру обрабатывать несколько моделей. И все говорят можно. И вот на мой взгляд упоминание о hmvc говорит лишь о том, что кто-то не столь умный не стал у чуваков спрашивать "а можно ли контроллеры будут общаться", а сразу написал о этом статью.

А что самое страшное, что потом новички этот абсурд воспринимают как правило и составляют на их фундаменте новые, более абсурдные. Скоро забудем о ооп, ведь будут появляться статьи о "фабричном подходе" где будут говорить что это сверх эволюция, ведь так проще писать.

Почему gulp так медленно работает в WebStorm?

Finesse: сборка происходит при изменении файлов. Но такое чувство, что указав в качестве сервера адрес сервера, который запускает browser-sync, ide вклинивается и что-то делает. Хотя ничего не видно, но все же обновление браузера и парсер js в консоле останавливается примерно на минуту.

Как в директиве получить контроллер в который она обернута?

Сергей Протько: у меня tbc и есть по сути player-control, состоящий из двух кнопок play-pause.
И я в общих чертах Вы за то, чтобы не городить на пустом месте и пользоваться ng готовыми директивами. И да я такой подход тоже рассматриваю и именно из-за этого обо всем расспрашиваю. Просто мне в какой-то момент показалось, что Вы говорите о том что плохо когда много кода в html. Правда говорили Вы о filter и говорили о них как о чем-то что составляет работу с данными... И вот эту тонкую грань я не могу уловить. Ведь с точки зрения приложения, фильтр это лишь частичка, которая является частью логики представления и говорит ему, как ему нужно показывать что-то. То есть это не логика приложения не на секунду. Но вот если рассматривать с точки зрения компонентного mvc, хотя компонентного mvc быть не может, ведь в любом случаи получится mvp и есть вот с его стороны смотреть, то на уровне одного компонента получается что фильтры это уже логика компонента, что в свою очередь означает что это логика маленького-самодостаточного приложения "кнопка или что-то ещё".

И вот значит сложность состоит в том, что я не знаю когда писать свое, а когда пользоваться нативными директивами... Спасибо Вам!

Как в директиве получить контроллер в который она обернута?

Сергей Протько: Опять вынужден просить у Вас совета, так как хочется проникнуться стилем angularjs.
Ситуация следующая - конечной целью стоит создания кнопок play-pause которые будут
одна под другой. Типа нажал паузу, появилась плей и наоборот.
Чтобы уж совсем не выглядеть школьником, хотя я именно он, но дело не в этом, я объясню
логику, по которой я бы сделал не в контексте angular, а в контексте программирования.

Первом делом нужно создать компонент-контейнер, trigger-button-container (в дальнейшем tbc),
который будет подписан под событие кликов, это само сабой разумеется ведь ожидается
более одного события плей-пауза, а это в свою очередь и склоняет в сторону контейнера.

Далее я хочу чтобы кнопки были менее заметны в обычном состоянии, по этому tbc пополняется
ещё двумя слушателями mouxeenter-mouseleave.

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

Далее я хочу попробовать сделать это так, как предложили Вы, но останавливаюсь и начинаю
писать этот вопрос, потомучто у меня получилось это ↓

<trigger-button-container  class="trigger-button-container"
				    ng-class="{
				   		mousein: trigger == 'in',
						mouseout: trigger == 'out',
						play: trigger == 'play',
						pause: trigger == 'pause'
					}"
					ng-mouseenter="trigger='in'"
					ng-mouseleave="trigger='out'"
					ng-click="trigger=trigger == 'pause' ? 'paly' : 'pause'">
	<play-button></play-button>
	<pause-button></pause-button>
</trigger-button-container>

Меня это напугало несмотря на то, что я даже не доделал.

И вот сам вопрос - будет ли правильно, оставить все как есть, я про три директивы
и классы для установки нужной анимации, а вот все события перенести в директивы?

И ещё... То что я в html тегах сделал mousein: trigger == 'in', и ng-mouseenter="trigger='in'"
это же ненормально? Лично мне кажется, что нужно в link директивы tbc создать свойство

$scope.trigger = {
	mousein: flase,
	mouseout: flase,
	play: flase,
	pause: flase
	//...и кто знает какие будут ещё
}

и по событию выставлять нужному свойству true и если нужно то другие false.

Будет так в духе AngularJS?

И еще сразу - хорошо ли вообще разворачивать рулоны в html тегах или по возможности
переносить все в директивы?

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

<trigger-button-container   class="trigger-button-container"
							ng-class="{
								mousein: trigger.mousein,
								mouseout: trigger.mouseout,
								play: trigger.play,
								pause: trigger.pause
							}">
	<play-button></play-button>
	<pause-button></pause-button>
</trigger-button-container>

?

И я читал пост в котором Вы упомянули перевод статьи о mvc... Очень буду рад, если увижу его.

Как востановить удаленый файл?

Виктор: я сейчас через программу восстановления обнаружил что в этой папке существует папка .git Это может что-то изменить?

Как востановить удаленый файл?

Виктор: нет. У меня была папка с несколькими файлами, а в редакторе сразу открылась вкладка с git и я не те кнопки нажал и редактор, как я потом разобрался, удалил файлы с изменением, то есть все.

Как в директиве получить контроллер в который она обернута?

Сергей Протько: это я написал раньше чем Вы, сейчас исправлю. И Вы правы насчет controllerAs, я чисто случайно сегодня наткнулся на тостере на это свойство и почему-то в голове засело что там true. Сейчас даже поиском нашел эту тему, но нет, там как раз алиас.

И тогда получается следующее - всю, ВСЮ работу DOM в link. То что с событиями представления работает не контроллер, то это я могу понять. Но касается ли это не только контроллера директивы, но и обычного контроллера?

Как в директиве получить контроллер в который она обернута?

Да, можно взять и подписаться в самой директиве. Будет типа angular.element(element).on(EventType, handler);
Но тогда для чего в директиве нужен контроллер? раньше я думал что директива это такое место, где связывают контроллер с сервисами. То есть некий эпицентр, в котором все сходится и связывается. Но этот пример показывает, да и не только этот, а вообще любой в котором будет замешены события мыши, что переиспользование директивы невозможно либо не понятно для чего нужен контроллер..

Как в директиве получить контроллер в который она обернута?

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

Как в директиве получить контроллер в который она обернута?

Я обновил вопрос. И мне тоже странно что контроллер "как-бы" инициализируется или переопределяется в директиве. Но я не знаю, как правильно приспособить контроллер директивы. Первое что мне нужно, это чтобы контроллер директивы был отдельным классом и значит я не знаю как получить его в самой директиве, разве что вынести его из определения angular.controller и просто так ссылку на него импортировать. Это так?

Если я создам обработчики событий, как и положено в контроллере, то как связать контроллер или контроллер директивы с самой директивой, то есть с функцией линк?

Когда стоит применять ngAnimate?

Сергей Протько: мне все больше и больше кажется, что его angular придумали сатонисты для того чтобы проверить на сколько люди могут зайти в лужу из г*на со словами "это же гугл сделал".
Не понятна логика вообще, зачем я должен на кнопке писать один из сервисов class или if... Неуже так логичней нежели "кнопка->когда я тебя нажму->сделай это и это".
А если я хочу сделать анимацию, которая вообще к событиям не привязана? Вот хочу чтобы бегали человечки и в определенное время что-то делали. Тоже нужно будет на изнанку вывернуться?

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

Когда стоит применять ngAnimate?

vasIvas: а Вы не случаем не знаете почему не работает пример из хелпа? plnkr.co/edit/xLle36dpzSrX4M2ajWPz?p=preview

Когда стоит применять ngAnimate?

Сергей Протько: как бы я её без ngAnimate сделал... По клику выполнил бы вызов хендлера, у которого в target.parent был бы весь родительский контайнер, а сама ссылка target.
Осталось лишь контейнеру запустить уход влево, а затем увеличить и поменять текст. То есть по сути просто цепочку из методов выстроить, где бы я уже через angular.element css классы добавлял.

Но я Вас понял и спасибо. Вы как всегда были правы. Сейчас нашел то что искал, момент в котором показывают что .animation возвращает методы, которые бы я и писал. Спасибо! Отдыхайте!)

Когда стоит применять ngAnimate?

Но там нет анимации, только тултипы с изменением альфы. Но Вы, я так понял, этим хотите сказать, что ngAnimate, это не для простых и быстрых анимаций, а для серьёзных?

Когда стоит применять ngAnimate?

Аааа.... Теперь понял.

Когда стоит применять ngAnimate?

Не понял юмора... :)

Что сделать чтобы поведение css было одинаковое во всех браузерах?

Лев Солнцев: а как сделать тоже самое через задержку? У меня эффект появления. При наезде курсора кнопка становится менее прозрачной и наоборот. И все это плавно делается. В FF работает замечательно. А префикс для гугла ничего не поменял.

$q, Promises или же task?

Сергей Протько: вот для примера, я сегодня с двенадцати часов по Москве сижу и думаю, почему у меня с локального файла открытого без сервера в браузере кнопка реагирует на мышь нормально, а в облаке с запущенного сервера нет. Обычная кнопка при наезде на которую в хандлере (пока в хендлере) я устанавливаю ей класс, который плавно увеличивает её альфу. И обратное при отводе. События angular. И вот ведет она себя так, как ей хочется. При чем ведет себя так только в гугле. Подсказали добавлять префиксы -webkit-, но это не помогает.

$q, Promises или же task?

Сергей Протько: дело не в том что я не могу сделать кнопку для плеера. Дело в том что я не могу сделать кнопку для плеера рассматривая html и css и js как три разных языка. Я не могу адаптироваться к том, что нет представления. Ведь его роль играет html, но это не представление, это просто бред. Если придерживаться ооп, то кнопки и прочие это все было бы представление. И да,я третий день делаю, но я делаю только из-за того что все в браузерном js делаю впервые. Очень много время уходит не на поиск и чтение информаци, а на переделывание мышления. А безумное css, которое похоже не на работу на плоскости, к которой я привык, а на оригами, меня вообще выбивает из колеи. Я много время потратил на раздумье того, как лучше разбивать sass и jade. В общем я не оправдываюсь и я действительно с трудом удается все это. И я уверен что и бог будет всего лишь божком если на него так посмотреть, а маленький паучок может стать настоящим тираном.

Что сделать чтобы поведение css было одинаковое во всех браузерах?

а как делать?