編輯/添加ngClass在指令

Question

我想創建一個指令來重構一些類的操作。請致電this fiddle。

我要添加或編輯從我的跟蹤指令的NG-class屬性來避免這個dupplicated代碼（在NG-類）：

<table> 
    <tr ng-repeat="track in tracks" 
     ng-class="{ 
     'track-is-stopped': trackState === 'stop', 
     'track-is-playing track-is-paused': trackState === 'pause', 
     'track-is-playing': trackState === 'play', 
     'track-is-playing track-is-buffering': trackState === 'buffering' 
     }" 
     track> 
     <td>{{ track.title }}</td> 
    </tr> 
</table> 

    <div ng-class="{ 
     selected: selected, 
     'track-is-stopped': trackState === 'stop', 
     'track-is-playing track-is-paused': trackState === 'pause', 
     'track-is-playing': trackState === 'play', 
     'track-is-playing track-is-buffering': trackState === 'buffering'   
    }" 
    ng-repeat="track in tracks" 
    track>{{ track.title }} 
</div> 

我想在我的指令來控制這個部分：

 ng-class="{ 
     'track-is-stopped': trackState === 'stop', 
     'track-is-playing track-is-paused': trackState === 'pause', 
     'track-is-playing': trackState === 'play', 
     'track-is-playing track-is-buffering': trackState === 'buffering' 
     }" 

如何做到這一點？ 它與任何元件的作用，與任何現有的NG-class屬性（所以我需要延長當前屬性）工作：

ng-class="{ selected: selected }" 

Answer 1

1. 在該指令的控制器創建getClass()：

   // ... 
   controller: function ($scope) { 
       $scope.getClass = function() { 
        return { 
         'track-is-stopped': $scope.trackState === 'stop', 
         'track-is-playing track-is-paused': $scope.trackState === 'pause', 
         'track-is-playing': $scope.trackState === 'play', 
         'track-is-playing track-is-buffering': $scope.trackState === 'buffering' 
        }; 
       } 
   } 
   

2. 調用它的觀點：

   <div ng-class="getClass()"> 
   

3. 您也可以安全地重複類清潔類對象：

   // ... 
   return { 
       'track-is-stopped': $scope.trackState === 'stop', 
       'track-is-paused': $scope.trackState === 'pause', 
       'track-is-playing': $scope.trackState === 'play', 
       'track-is-buffering': $scope.trackState === 'buffering' 
   }