HTML Href 标记的 Json 解析问题

Question

我正在使用 AngularJS 和 Coldfusion 跟踪代码并尝试解析 JSON，使用 cfc 我得到 JSON 格式的数据：

[{"HIRE_DATE":"26 Jun 86","FIRST_NAME":"<a href=javascript:void(0);>Georgi<\/a>","EMP_NO":10001,"BIRTH_DATE":"02 Sep 53"},{"HIRE_DATE":"21 Nov 85","FIRST_NAME":"<a href=javascript:void(0);>Bezalel<\/a>","EMP_NO":10002,"BIRTH_DATE":"02 Jun 64"},{"HIRE_DATE":"28 Aug 86","FIRST_NAME":"<a href=javascript:void(0);>Parto<\/a>","EMP_NO":10003,"BIRTH_DATE":"03 Dec 59"},{"HIRE_DATE":"01 Dec 86","FIRST_NAME":"<a href=javascript:void(0);>Chirstian<\/a>","EMP_NO":10004,"BIRTH_DATE":"01 May 54"},{"HIRE_DATE":"12 Sep 89","FIRST_NAME":"<a href=javascript:void(0);>Kyoichi<\/a>","EMP_NO":10005,"BIRTH_DATE":"21 Jan 55"},{"HIRE_DATE":"02 Jun 89","FIRST_NAME":"<a href=javascript:void(0);>Anneke<\/a>","EMP_NO":10006,"BIRTH_DATE":"20 Apr 53"},{"HIRE_DATE":"10 Feb 89","FIRST_NAME":"<a href=javascript:void(0);>Tzvetan<\/a>","EMP_NO":10007,"BIRTH_DATE":"23 May 57"},{"HIRE_DATE":"15 Sep 94","FIRST_NAME":"<a href=javascript:void(0);>Saniya<\/a>","EMP_NO":10008,"BIRTH_DATE":"19 Feb 58"}]

这个问题是，它按原样加载到 ng-grid 中：

***hire_date first_name emp_no 生日

89 年 9 月 12 日 <a href=javascript:void(0);>Anneke</a> 10005 53 年 4 月 20 日***

所以它没有呈现为链接，所以我可以点击打开，

这里是 Angular JS 代码

if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('workData.cfc?method=getEmployees&returnformat=json').success(function (largeLoad) {      
                    data = largeLoad.filter(function(item) {
                            return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.myData = angular.fromJson(data);
                    $scope.setPagingData($scope.myData,page,pageSize);
                });            
            } else {
                $http.get('workData.cfc?method=getEmployees&returnformat=json').success(function (largeLoad) {
                    $scope.myData = angular.fromJson(largeLoad);
                    $scope.setPagingData($scope.myData,page,pageSize);
                });
            }

Answer 1

我不太确定以下内容是否完全正确 - 现在无法检查。至少这个想法应该是有效的！

ngGrid 将使用的默认cellTemplate 是：

<div class="ngCellText" ng-class="col.colIndex()">
  <span ng-cell-text>{{row.getProperty(col.field)}}</span>
</div>

如您所见，您的 FIRST_NAME 包含在内联表达式中 - 例如{{}}，所以 Angular 会转义你的所有内容。

您必须确保您的内容通过$sce.trustAsHtml 功能定位并包含在ng-bind-html 中。我会在你的控制器中定义一个函数，如下所示：

$scope.trust = function(value){
    return $sce.trustAsHtml(value);
}

之后你必须像这样定义自己的cellTemplate：

<div class="ngCellText" ng-class="col.colIndex()">
  <span ng-cell-text ng-html-bind="trust(row.getProperty(col.field))"></span>
</div>

并配置您的单元格定义：

columnDefs: [
  { field: 'FIRST_NAME', 
    displayName: 'First Name',  
    cellTemplate: '<div> ... </div>' }, ...

有关如何模板化 ngGrid 的更多信息，请访问 github wiki：https://github.com/angular-ui/ng-grid/wiki/Templating