在指令中編輯/添加ngClass

Question

我正在嘗試創建一個指令來重構某些類的操作。

請看一下這個小提琴 。

我想從我的track指令中添加或編輯ng-class屬性，以避免重復代碼（在ng-classes中）：

<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' }