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

Question

[vasIvas]

Сначала начал задавать более общий вопрос, но потом понял что Вызван он незнанием того, как получить контроллер, в который обернута директива.

<div ng-controller="SomeControeller as someControeller">
	<some ng-click="someControeller.run()">####</some>
</div>

function SomeController(){
	this.run = function(){
		console.log('SomeController');
	}
}

function someDirective(){
	return {
		controller: 'SomeControeller',
		link: function($scope, iElm, iAttrs, controller) {
			console.log(controller);
			controller.run = function(){
				console.log('directive');
			}
		}
	};
}

var app = angular.module('app', []);
app.controller('SomeControeller', [SomeController]);
app.directive('some', [someDirective]);
angular.bootstrap(document, ['app']);

Вот только сейчас узнал, что контроллер в link лишь ещё один экземпляр контроллера,
а не тот во что обернута директива. Нагуглить сам не смог, так как не понимаю что спрашивать.
По этому остается спросить только Вас - как получить нужный контроллер или если его и не нужно получать по идеологии, то почему?

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

Answer 1

[Сергей Протько]

или если его и не нужно получать по идеологии, то почему?

потому что это создает зависимость директивы от контекста, в котором она используется. Проследите логику

1) работа директивы требует того что бы она была обернута в SomeControeller на уровень выше.
2) директива становится частью SomeControeller, или если быть точным, куска view которым управляет SomeControeller.
3) нет смысла в директиве, так как мы не можем более реюзать ее в другом месте
4) если директива зависит от контроллера SomeControeller, почему бы не вынести из SomeControeller то что нужно директиве в ее собственный контроллер?

как-то так. Все взаимодействие с директивой должно происходить либо через контроллеры директив (параметр require директивы), либо через атрибуты (изолированный scope, bindToController в angular 1.4). И уж тем более странно желание подменять методы контроллера из link.

updated

короче суть в непонимании того что есть директива как я понимаю. Директива - самодостаточная единица (самостоятельное маленькое MVC приложение). По хорошему она может зависеть только от других директив, но ей глубоко должно быть плевать где именно и как ее используют. Она выполняет свой маленький кусочек логики. Некоторые директивы выступают в роли фасадов, инкапсулируя в себе и упрощая работу с множеством директив.

Далее, по поводу обработчиков - яркий пример директива ng-click. Эта директива выглядит как-то так:

function myNgClick() {
    return {
        restrict: 'A',
        scope: {
            callback: "&myNgClick"
        },
        link: function (scope, el) {
            el.bind('click', function (e) {
                scope.$apply(function () {
                     scope.callback({$event: e});
                });
            });
        }
    }
}

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

link директивы нужен ТОЛЬКО для того что бы связать DOM и логику. То есть в 99% случаев в директиве будет только link или только контроллер. Оба - это уже стремно, в этом случае лучше вынести ту логику которую хочется запихнуть в link в отдельную директиву.

контроллер (мы сейчас отойдем чуть чуть от MVC только ради того что бы упростить все) реализует всю логику (или делегирует модели). Вся логика не относящаяся к DOM а например относящаяся к обработке данных должна быть вынесена в контроллер.

Пара слов по поводу ng-controller. Это так же директива, которая позволяет привязать к элементу какой-то контроллер. Эта штука по сути (как и ng-include в принципе) нужна только для ускорения разработки и упрощения. В целом же приложение на angular стоит воспринимать как HMVC приложение, состоящее исключительно из деревьев директив. Первый шаг на пути к web-components (по сути ангуляровские директивы послужили неплохим глотком вдохновения).

Как-то так.

Comments

[vasIvas]

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

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

[vasIvas]

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

[vasIvas]

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

[Сергей Протько]

vasIvas: а, ну я так примерно и думал... сейчас допишу ответ.

[Сергей Протько]

vasIvas: заметте, я уже упоминал что контроллер только для работы с данными, а для работы с DOM есть link и он нужен только за этим. А у вас работа с DOM в контроллере...

и еще - controllerAs - там надо алиас контроллера прописывать... не пойму почему у вас там true.

[Сергей Протько]

vasIvas: вообще у вас два варианта:
1) простой - добавлять удалять классы самому
2) использовать nganimate, что позволит разработчику использующему вашу директиву самому принимать решения как будет отрабатывать анимация и т.д.

[vasIvas]

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

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

[Сергей Протько]

vasIvas: вообще такое понятие как "обычный контроллер" в angular нет. ng-controller это директива, которая позволяет для элемента объявить какой-то контроллер. Скажем вы хотите присабачить куску темплейта поведение и добавить логику для работы с данными но вам лень делать для этого отдельную директиву - на помощь приходит ng-controller.

[vasIvas]

Сергей Протько: Опять вынужден просить у Вас совета, так как хочется проникнуться стилем 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... Очень буду рад, если увижу его.

[Сергей Протько]

vasIvas: ну давайте разбираться...

три директивы это нормально, НО... давайте разделим обязанности:

1) у нас есть наш tbc - давайте его переименуем в toggle-container хотя бы
2) нам надо прятать и показывать наш контейнер по наведению мыши, это отдельное поведение, для него сделаем отдельну директиву (по сути у вас для этих целей используется комбинация из вашей логики + ng-class), тогда можно будет реюзать ее например... хоть и маловероятный сценарий. Или быть может мы захотим дополнительное поведение потом - по наведению на плеер показывать наш элемент - тогда это будет уже две директивы которые будут общаться между собой...
3) ng-mouseenter и ng-mouseleave вызывают $apply и по сути запускают дайгест. В нашем случае это нужно только потому что мы используем ng-class и биндинг, в то же время мы можем просто в link вешать классы или дергать ngAnimate (кому как больше нравится, в большинстве случаев ngAnimate избыточен, хоть и дает дополнительную гибкость).
4) кнопки о контейнере поидее знать не должны... как же их прятать и как вообще реагировать на клики? Обычно люди не парятся и юзают ngHide/ngShow. В этом случае контейнер не нужен (нужно только состояние плеера...

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

p.s. если и соберусь то это будет не скоро, вопервых мативации мало (ну мне эта статья интересна только с точки зрения истории, я перевожу статьи что бы другим кидать))

[vasIvas]

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

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

[Сергей Протько]

vasIvas: плохо когда в html много выражений, много логики. Если тернарные операторы появляются то все очень плохо.... Словом темплейты в angular должны в идеале только отражать состояние системы, но не влиять на него. Фильтры его по сути меняют, а не реагируют на состояние, это эдакие препроцессоры состояний, полностью отказаться от них не выйдет - они все ж удобны иногда, но коллекции ими обрабатывать - это только для простеньких прототипов которые никогда не увидят продакшен.

Что до много HTML кода из-за директив - это дело можно потом обернуть в фасад и тогда все становится чуть радужнее.

По поводу "писать свое или нативное" - ну тут все упирается в то что вы хотите сделать. Скажем использование фильтров для коллекций это для простых задач быстро, но это добавляет технического долга. Если вы на 100% уверены что все будет просто, если уверены что коллекции будут маленькие, то можно забить и юзать фильтры, но потом может возникнуть ситуация при которой эту штуку придется переделывать.

Мне нравится явные штуки, надо отфильтровать коллекцию - смотришь в контроллере как это делается и не думаешь "где это оно фильтрует". Так и живу... стараюсь избегать магии.