编辑/添加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' 
   }