Динамическое изменение цвета с помощью директивы текста Угловая JS

Question

Моя директива, кажется, не работает, вот мой код:

//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"); 
     } 
    }; 
}); 

HTML:

  <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="/images/profile-placeholder.jpg" width="50" height="50"> 
           </img> --> 
          <img class="round" src={{user.profileImageUrl}} width="50" height="50"></img> 
         </td> 
         <!-- <td><img src={ {user.profileImageUrl}} width="100" height="100"></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> 

Я хочу, чтобы иметь возможность динамически изменить цвет пролета:

> <span profile-colour="{imageId: {{$index}}, colour: 'blue'}" 
> id='name{{$index}}'>{{user.firstName}}</span> 

при загрузке таблицы, используя описанную выше директиву путем присоединения класса, но это не ч с любым эффектом. Мой CSS:

/*purple text */ 

.purpleText { 
    color: #6c58bF; 
    font-weight: 900; 
    text-transform: uppercase; 
    font-style: bolder; 
} 

Как я могу заставить это работать, спасибо!

Answer 1

Если я понять это правильно, и у вас есть желаемый динамический выбор цвета хранится в user.profileColour, то вы можете сделать что-то вроде этого

<span ng-class="{ 'purpleText' : user.profileColour === 'purple'; 'greenText' : user.profileColour === 'green'}"> 

И так далее.

Вы можете абстрагировать это на функцию, в которой вы проходите в user.profileColour, и возвращать класс, в зависимости от того, где вы хотите использовать логику (если вы превратите ее в функцию, которую вы могли бы использовать в контроллере). Так что-то вроде -

<span ng-class="setColor(user.profileColour)" > 

и в контроллере

$scope.setColor = function(color) { 
    //assuming profileColour is purple this would return "purpleText" 
    return color + "Text"; 
} 

Это предполагает, что все profileColour являются строками.