AngularJS factory placement

Question

i have this lightbox that pops up from time to time. There are 3 ways to close it. Close button, clicking the overlay that's outside it and another way. For the close action i decided to do a factory that looks like this:

app.factory('close',function(){
   return {
      close: function(){
                $('.mySelector').fadeOut();
             }
   }
});

One of my HTML elements that i want to have close the lightbox would be something like this:

<a href="" ng-click="close">close lightbox</a>

The question i am faced with is this: Should i inject the factory in a directive (seeing as it manipulates the DOM) or in a controller? - the controller is there either way since i need it for other stuff. The advantage of the first is that my markup would only have a controller attached to the top element of the lightbox and be done with it. The directive on the other hand will have to be attached to each element individually + there's the directive code itself (little of it may be).

This translates to:

added code for directive + 
<top-element-of-lightbox ng-controller="myController"> <!-- controller does NOT have factory injected -->
   <a href="" ng-click="close" **my-directive**>close lightbox1</a> <!--directive attached to element -->
   <a href="" ng-click="close" **my-directive**>close lightbox2</a> <!--directive attached to element -->
   ...
</top-element-of-lightbox>

Versus:

0(zero) directive code +
<top-element-of-lightbox ng-controller="myController"> <!-- controller HAS factory injected -->
   <a href="" ng-click="close">close lightbox1</a> <!-- no directive attachment -->
   <a href="" ng-click="close">close lightbox2</a> <!-- no directive attachment -->
   ...
</top-element-of-lightbox>

Lastly, i am new to Angular so i would appreciate if you justify your response and also please tell me if i am going about this whole thing the right way and if there are areas where i could improve or an other approach would be better.

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 — m59, Sep 20 '14 at 20:49
@m59 Somewhat useful - if only to solidify my view that the "angular way" is not always the best way, even in an angular app. Thank you. — Radu Andrei, Sep 20 '14 at 23:25
Something is the "Angular way" *because* it is the best way to do something in an Angular app. So I'm not sure what you mean by 'the angular way is not always the best way.' — SomeKittens, Sep 21 '14 at 16:33

score 1 · Answer 1 · answered Sep 20 '14 at 20:47

1

Do not manipulate your DOM in controller or services(service, factory). You must do that in directive
Instead of using jQuery selector you can directly get hold of element and manipulate it inside directive
Using angular animations instead of relying on jQuery

Most importantly all your queries and above issue you face is solved in this awesome video which just explains creating a directive to hide stuff with animations. https://egghead.io/lessons/angularjs-animating-the-angular-way

Cheers!!!!

answered Sep 20 '14 at 20:47

Siraj

687
4
7

I saw the video before and the reason of "declarative dom" is not reason enough for what i need to do at this point, or in general. Furthermore Angular animations are css transitions, period. jQuery animations are more than that. Another aspect is that the manipulations DOES take place in the directive (the factory is injected). The factory is used because that particular piece of code does not need a scope and always refers to the same element! So thank you, but i am not going with the approach in the video. – Radu Andrei Sep 20 '14 at 23:21
Since you asked "if i am going about this whole thing the right way", I pointed out to things which are not in Angular way. You are happy to implement your own solutions in jQuery way as long as it is serving the purpose – Siraj Sep 20 '14 at 23:33
I realise i may not have been explicit enough about what i meant with "the right way" and gave out to little info. I apologize for that, however why is factory injection in a directive (leaving aside the jQuery code) and manipulation of the DOM inside it, not the "Angular way"? – Radu Andrei Sep 20 '14 at 23:43
Factories and services are used for business logic, data calls, utilities. You can use directive controller to Manipulate DOM. I am not jQuery expert but I think your factory will select all elements that have class `mySelector` on them. This means you will add class to each a tag and hide them all at once, but if you need to hide it individually then it's a problem. Instead of adding class add a directive. If you want you can use jQuery animations as well inside Directive – Siraj Sep 21 '14 at 00:00
No, they are also used to hold reference to the same element, from what i read. And no to the other things as well. Anyway, thanks for the help. – Radu Andrei Sep 21 '14 at 08:07

AngularJS factory placement

1 Answers1

Linked