動態改變文本使用指令顏色角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> 

在使用上述指令通過將一類的表進行加載，但它不是H有任何影響。我的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都是字符串。