Using services in directives

3,529 views
Skip to first unread message

AngularNewbee

unread,
Aug 22, 2012, 9:55:52 AM8/22/12
to ang...@googlegroups.com
Hello,

what I want to know is: Is it possible to use angular services within directives or more specific in templates of directives?
I want to add localization functionality to my application so I need to translate several static texts.
So far I was able to manage this by using a service. The service gets all translation texts via $http and provides them with a function.
So far so good.

But some pieces of my application are realized with directives. They contain an url-template so my question is:
Is it possible to inject my service from that directive template?

Thanks in advance

Witold Szczerba

unread,
Aug 22, 2012, 6:28:50 PM8/22/12
to ang...@googlegroups.com
Hi,
using services in directives is very simple, just inject them and
that's it. It seems your question evolves to: is it possible to
construct a template inside directive involving a service. I am not
sure I do understand, it seems you want to concatenate templates from
static and dynamic/runtime (provided by a service) fragments. Well,
that seems to be a challenging task, because templates are supposed to
be known during compile phase and waiting for $http to get
translations would require you to manually postpone compilation.
However: I am not sure if this is exactly what you were asking.
Can you provide an example?

By the way: generally I think it is not a good idea to implement
localization that way. If you could make all the messages not to leak
out of HTML templates, you could make your back-end to provide already
translated templates, so you would never have to deal with that in
your application. End to end testing should be easier as well...

Regards,
Witold Szczerba
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

Will Kriski

unread,
Aug 22, 2012, 6:51:52 PM8/22/12
to ang...@googlegroups.com
I created a reference to a service in my controller. Then I call the function from the HTML which I assume you could do in your template.

AngularNewbee

unread,
Aug 23, 2012, 2:54:19 AM8/23/12
to ang...@googlegroups.com
Hi there!

using services in directives is very simple, just inject them and that's it. 

Sounds easy; but how do I do it? Sometimes I miss the forest for the trees.
 
Am Donnerstag, 23. August 2012 00:51:52 UTC+2 schrieb Will Kriski:
I created a reference to a service in my controller. Then I call the function from the HTML which I assume you could do in your template.

On my index.html I can call my service over a function that I declared in my controller. That's ok... 

Maybe I explaned my problem in a wrong way; I try to make it clear:

Here is a jsFiddle: http://jsfiddle.net/pmDpG/2/
I don't know how to make jsfiddle including an external resource but I try to explain.
If I change the "templateUrl" property in the directive to "template" I'm able to use my service with "{{translateMe('one')}} "
Maybe that's what you mentioned by saying 'just inject them' right?

Using a template within my controller scope works properly - as expected - but in my case the template is an external HTML fragment in a separate location/file. So I have to use 'templateUrl' in my directive.
This HTML contains parts that could be translated with my service, but I can't call the service from there. Assuming the HTML looks like 
<div> {{ translateMe("one") }} </div> my service won't be called.
It is possible to bind some variables with the scope-property ("@", "=",...) in the directive so that the values are available in the templateUrl; is it possible to bind the service in a similar way?

Hope that this is not more confusing than before =)
Cheers
Reply all
Reply to author
Forward
0 new messages