Skip to the content.

Trustroots Angular Directives

Note that we are moving to React so you should always prefer to make React Components instead of new Angular directives.

Always prefix directive with “tr”, eg. /modules/users/client/directives/tr-avatar.client.directive.js. Place directive views under module’s /views/ folder, for example /modules/users/client/views/directives/tr-monkeybox.client.view.html.


User’s avatar. Links to user’s profile.


<div tr-avatar data-username="username"></div>


A big panel with username, avatar and other info about user. Links to user’s profile. Pass user object for it.


<div tr-monkeybox data-user="user"></div>


Location input with suggestions.


<div tr-location data-location="model"></div>

Flash Messages

Show success/error flash messages. Remember to add messageCenterService to your controller requirements.


messageCenterService.add('success', 'Great success!!', {
  timeout: flashTimeout,

You can use other message types:

flashTimeout is defined at settings service and is currently 6 seconds. For long messages or errors you might want to put something like 10-15 seconds.

If you don’t define timeout, message will stay there until next $state change and user can dismiss it by clicking small X icon in it.

See message-center for more info.