I am currently facing an issue while using Angular with ui-router. Everything is working smoothly except for one particular scenario. I have designed a directive element that serves as the header of the page. This element consists of a menu with 4 links. The visibility and functionality of these links are dependent on the id of the current user, which is passed as an attribute when I invoke my directive.
ui.js
angular.module('app.ui',
[
]).directive('userHeader', function()
{
return {
restrict : 'E',
templateUrl : '/scripts/directives/ui/userHeader.html',
controller : function($scope)
{
},
link : function(scope, element, attributes)
{
scope.uid = attributes.uid
}
};
});
userHeader.html
<md-list layout="row" class="md-whiteframe-z1 no-padding">
<md-list-item class="has-link" layout-align="center center">
<md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userInformations({ id : '{{ uid }}' })">
<div class="inset">
<md-icon md-font-set="material-icons">person</md-icon>
</div>
<md-tooltip hide-gt-sm>Informations</md-tooltip>
<div class="inset" hide-sm>Informations</div>
</md-item-content>
</md-list-item>
<md-list-item class="has-link" layout-align="center center">
<md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userEvents({ id : '{{ uid }}' })">
<div class="inset">
<md-icon md-font-set="material-icons">event</md-icon>
</div>
<md-tooltip hide-gt-sm>Événements</md-tooltip>
<div class="inset" hide-sm>Événements</div>
</md-item-content>
</md-list-item>
<md-list-item class="has-link" layout-align="center center">
<md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userGalleries({ id : '{{ uid }}' })">
<div class="inset">
<md-icon md-font-set="material-icons">photo</md-icon>
</div>
<md-tooltip hide-gt-sm>Galeries</md-tooltip>
<div class="inset" hide-sm>Galeries</div>
</md-item-content>
</md-list-item>
<md-list-item class="has-link" layout-align="center center">
<md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userFriends({ id : '{{ uid }}' })">
<div class="inset">
<md-icon md-font-set="material-icons">group</md-icon>
</div>
<md-tooltip hide-gt-sm>Amis</md-tooltip>
<div class="inset" hide-sm>Amis</div>
</md-item-content>
</md-list-item>
</md-list>
user.html
<user-header user-id="UserInformations.user.id"></user-header>
I am seeking guidance on how to properly bind the user-id attribute to all ui-sref attributes within my md-item-content so that the correct links can be generated.
Any assistance provided in resolving this matter would be greatly appreciated.