Выполнение директивы?

Question

[Джон Голт]

Есть директива, которая переключает класс:

myApp.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

Как сделать так, чтобы при клике на кнопку с классом .add, директива выполнялось не для этой кнопки, а для элемента с классом .hide-elements ?

<div class="hide-elements"></div>
    <button class="add">+</button>

Comments

[copal]

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

<hide-container>
    <div class="hide-elements"></div>
    <button class="add">+</button>
</hide-cintainer>

[Джон Голт]

copal: я понял, однако в ангуляре совсем недавно и пока слабо представляю, как полностью реализовать в самой директиве, то что вы описали

Answer 1

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

используйте ng-click и привязку к состоянию, не работайте с DOM сами.

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

<div class="hide-elements" ng-class="{'your-class-name': vm.some.condition}"></div>
    <button class="add" ng-click="vm.add()">+</button>

в контроллере меняете состояние компонента и все хорошо.

Поясню идею, почему это хорошо. Если у вашего приложения нет привязки к DOM и он оперирует примитивами, который предоставляет вам ангуляр (ngHide/ngShow/ngClass/ngRepeat и т.д.) то вам не нужно париться вообще о том как формируется представление. Уменьшается возможность побочных эффектов, отсутствует необходимость покрывать код тестами (ну или волноваться что что-то сломается просто так), достаточно проверить что приложение входит в необходимое состояние а ангуляр вам уже гарантирует что представление под это состояние подстроится так, как вы это задекларировали в шаблонах.

Comments

[copal]

Автор вопроса упомянул что ещё не очень опытен, по этому я прикроюсь этим и спрошу, как-будто бы стараюсь для него - что Вы подразумеваете под -

никаких попыток самостоятельно что-то поменять в DOM

Вы же не говорите о том, что запрещается в директиве работать с element и его children?

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

copal: Нельзя работать с DOM но если совсем никак то можно. Ну то есть необходимость делать свои декларативные примитивы которые должны изменять DOM таки имеется, с другой стороны что всяки раз когда появляется желание порыться руками в элементах, то следует остановиться на минутку и подумать, можно ли это сделать на стандартных примитивах. И в 90% случаев - можно.

Angular имеет определенную философию, UI должен быть декларативным и реагировать на изменения состояния UI. Это позволяет перестать волноваться о том что там в UI происходит, резко понижает сложность, снижает риски и т.д. Императивная логика работы с DOM для ангуляра чужда, и это нужно в очень редких случаях. И да, обычно для этих случаев уже есть готовые решения.

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

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

[copal]

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

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

copal: на русском конечно, у меня не настолько все хорошо с английским что бы статьи писать, а жаль.

[copal]

Сергей Протько: главное что техническим пониманием дела у Вас более чем офигенно (читал Ваши ответы и казалось, что это сто летний программист компилятора рассказывает).
А вот когда знаешь что русский чел сделал что-то прикольно но документации на родном языке не написал, хочется послать его на фиг.

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

copal: пффф, мне еще учиться и учиться. Вы бы видели мой TODO список того с чем разобраться да почитать (я правда его храню в голове)... А крутые разработчики обычно просто на тостере не тусуются ну или вкладывают чуть меньше свободного времени, вот и создается такой контраст. Так что... как-то так.

p.s. важная мысль - не доверяйте чувакам в интернете, даже если считаете что они авторитетны.

[copal]

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