AngularJS: using services in directives

Question

This is an angularjs application. I have a service that handles content loading (ajax). While the service receives the content, some things in the application are hidden and then displayed again (depending on the returned content). They can have the same scope, different scope. They just need to hide while downloading content, and then show when it's done. Pretty normal stuff.

Currently, I have separate controllers that watch the "loading" of the service property and use the usual angular directives (ng-show, ng-hide, etc.) to show / hide. But that sounds like a bust. I would prefer to write a custom "download" directive that introduces the download service and also performs viewing and showing / hiding.

My question is: I want to do "bad"? The controller path, I end up collecting a bunch of code, possibly up to 5 or 6 times, or even more as the application grows. User-defined directory path, I write it once and use the attribute in which I need it. Yes, there is a dependency on this service, but it just doesn’t seem like the end of the world that some people made me think that I think so.

Why is it worth it, I feel that I have heard so many times the “separation of concerns” that I have paralyzed it. It makes me overdo it because I want to do everything right, but he is sure that I do not feel very productive.

Answer 1

If I understood correctly, you have clot elements that should be hidden when a particular service loads data and then displays again when data is loaded, right?

In this case, events may be a good solution:

• they can be global for application (which I think is what you are looking for).
• they avoid direct communication between elements (also one of your problems).

So, in your service, just broadcasting events when something happens:

$rootScope.$broadcast('loading-data'); axajStuffOrWhatever(function() { $rootScope.$broadcast('data-loaded'); }); 

Then end the show / hide behavior in the directive that will listen to these events.

 .directive('hideWhileLoadingData', function() { return { link: function(scope, el, attrs) { scope.$on('loading-data', function() { el.css('display', 'none'); }); scope.$on('data-ready', function() { el.css('display', 'block'); }); } }; }); 

Use the directive:

 <div hide-while-loading-data>something</div> 

The advantage of using events here is that they can later be created by another service or several services, and this directive will not be affected by this until the events are the same.

For more complex behavior, you can also parameterize events and the directive, so different elements will respond to different things.

I made an example of this.

Answer 2

In my opinion, all areas that depend on this service should be child with the same parent area. If you have a parent area responsible for communicating with the service, any directive of any access area can access it through $parent in $scope .