Question

我正在使用角度ui网格，有一列是获取html字符串作为输入，所以要显示列值我在cellTemplate中使用ng-bind-html（它可以很好地显示普通的内部文本），但是cellTooltip不适用于工具提示（它没有），如果我在cellTemplate中使用title =“{{row.entity.htmlfield}}”然后它显示html字符串，但我需要纯文本，我怎样才能实现这一点？

我在用什么：

$scope.datagrid={
 colDefs=[
        {
           field:'htmlfield',
           cellTemplate:'<div title="{{row.entity.htmlfield}}" ng-bind-html="{{row.entity.htmlfield}}"></div>',//html field is expecting html content
           cellTooltip:function(row,col){
           return row.entity.htmlfield //it doesn't work with cellTemplate//
}
        }
      ]

}

Answer 1

解决方案1： 使用cellTooltip时删除 cellTemplate 您可以使用像

这样的过滤器

app.filter('trusted', function ($sce) {
  return function (value) {
    return $sce.trustAsHtml(value);
  }
});

在cellTemplate内使用 -

title="{{row.entity.htmlfield | trusted}}"

解决方案2：

您可以在上面的行上创建过滤器，并在cellFilter中使用它工具提示尊重cellFilter，因此如果您定义了一个cellFilter，它也将在工具提示中使用。

希望这有帮助！

Answer 2

我使用自定义指令实现了目标，指令的代码就像

$scope.datagrid={
  colDefs=[
            {
               field:'htmlfield',
               cellTemplate:'<tool-tip text="{{row.entity.htmlfield}}"></tool-tip>',//html field is expecting html content, no need to use cellTooltip as it doesn't work//
            }
          ]
}
//create a custom directive to give required feel to your field template//
angular.module('app').directive('tooTip',function(){
          var linkFunction=function(scope,element,attributes){
                  scope.text=String(attributes['text']).replace('/<[^>]+>/gm', ''); 
          };
return{
    restrict:'E',
    template:'<div title="{{text}}">{{text}}</div>',
    link:linkFunction,
    scope:{}

};
});

Answer 3

例如，我们可以使用如下所示的cellTemplate和cellTooltip

$scope.gridOptions = {
    columnDefs: [
      { name: 'name', cellTemplate:"<div class='ui-grid-cell-contents'  title='{{grid.appScope.customTooltip(row,col,COL_FIELD)}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>"
      }
]

$scope.customTooltip = function (row,col,value) {
    console.log(row);
    console.log(col);
    return value;
  }

我已经为cellTooltip创建了函数，并将其传递给title标签，并且工作正常。 https://plnkr.co/edit/Dcpwy5opZ9BwC8YdWf3H?p=preview

Answer 4

来自ui-grid源的原始cellTemplate：

"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"

在此模板中，TOOLTIP和COL_FIELD以及CUSTOM_FILTERS是ui-grid macro-s。

我定义了cellTemplate（仅图标），并使用cellTooltip（带字段错误消息），并自由工作：

columnDefs: [
{
...
cellTemplate: '<span class="glyphicon glyphicon-alert" title="TOOLTIP"></span>',
cellTooltip: function( row, col ) {
                        return ...;
             }
...
}
]

Answer 5

那么简单只需删除app= Flask(__name__,template_folder='templates', static_folder='static') @app.route('/') def index(): return render_template('firstpage.html') @app.route('/', methods=['POST']) def getvalue(): #some basic declarations main() flask.jsonify({'html': filename}) def main(): start_time = time.time() createDirectory("Myapp") p1 = Process(target=func1(mycol1,mycol2)) p1.start() p2 = Process(target=func2(mycol3,mycol4)) p2.start() p3 = Process(target=func3(mycol5,mycol6)) p3.start() p4 = Process(target=func4(mycol7,mycol8)) p4.start() p1.join() p2.join() p3.join() p4.join() print("--- %s seconds ---" % (time.time() - start_time)) if __name__ == "__main__": app.run(debug=True)并在cellTemplate div中添加cellTooltip标签即可。

title

如何在angular ui grid

5 个答案:

来自ui-grid源的原始cellTemplate：