I'm having trouble with my directive, here is the code I'm using:
//profile colour directive
app.directive('profileColour', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var imageDiv = scope.$eval(attrs['profileColour']).imageId;
var colour = scope.$eval(attrs['profileColour']).colour;
var divName = '#name' + imageDiv;
//$(divName).addClass("purpleText");
$(divName).addClass("purpleText");
}
};
});
Here is the HTML snippet:
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2">
<span></span>
</th>
<th class="col-xs-8" ng-click="sort('firstName')">
<span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th class="col-xs-2">
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-click="showModal($event, user.emailAddress)" change-image="{imageId: {{$index}}, colour: 'blue'}" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>
<img class="round" src={{user.profileImageUrl}} width="50" height="50"></img>
</td>
<td>
<div style="padding-top:1em"><span profile-colour="{imageId: {{$index}}, colour: 'blue'}" id='name{{$index}}'>{{user.firstName}}</span>
<br>{{user.lastName}}
<br>{{user.profession}}</div>
</td>
<td>
<div style="padding-top:1em">
<img id={{$index}} src="images/arrow-right-purple.png" width="50" height="50"></div>
</td>
</tr>
</tbody>
</table>
I'm trying to dynamically change the color of the span like this:
> <span profile-colour="{imageId: {{$index}}, colour: 'blue'}"
> id='name{{$index}}'>{{user.firstName}}</span>
I've defined the CSS for purple text as follows:
/*purple text */
.purpleText {
color: #6c58bF;
font-weight: 900;
text-transform: uppercase;
font-style: bolder;
}
But so far, it's not working. Any suggestions on how to make it work? Thank you!