Ui-Grid CellTemplate的行为不符合预期

时间:2015-10-14 10:07:58

标签: angularjs angular-ui-bootstrap angular-ui-grid

我正在使用仪表板监控作业并更新状态 对接Ui-Grid中的cellTemplate并不像预期的那样 这里我尝试了什么

 $scope.gridOptions = {
      columnDefs: [{
        field: 'Id'
      }, {
        field: 'Job'
      }, {
        field: 'status',
        cellTemplate:'<div>{{grid.appScope.applyStatus(row.entity.status)}}</div>'
        //note  this work well 

       // cellTemplate:'<div><i class="fa fa-circle-o-notch fa-spin"></i></div>'

      }]
    };

并且此函数应使用fontawesome Icon

更新状态
  $scope.applyStatus= function(status) {
      switch(status)
            {

                case "Pending" :
                   return  '<i class="label-info fa-pause" />'; 

                case "Running" : return '<i class="label-primary fa-play-circle-o" />'
                case "Error" :
                    return '<i class="label-danger  fa-bug" />';                                                                                   
                default:
                    return '<i class="label-default fa-box fa fa-question"/>';

            }   

    return 

};

但是,而不是渲染我所期望的Angulars将其视为文本

这里有一个plunker http://plnkr.co/edit/7UapXgNzZWPXVZbLjYFy?p=preview

任何有关良好发动机故障解释的帮助都将受到赞赏

1 个答案:

答案 0 :(得分:2)

以下是使用ng-class进行此操作的方法。 http://plnkr.co/edit/lRuP4agztDo7kxEO5VE6?p=preview

CellTemplate:

<div><text><i ng-class="grid.appScope.applyStatus(row.entity.status)"/></text></div>