ag-Gridは、動作していない列にテンプレートを作成します。AngularJS

Question

ag-Gridを使用してデータテーブルを作成しています。テンプレート列を作成したいと思います。ここに私のコードです。しかし、私はグリッドテーブルがフィドルに表示されていないので、フィドルを提供することができません。

JS：

agGrid.initialiseAgGridWithAngular1(angular); 

var app = angular.module('myApp', ['agGrid']); 
app.controller('myController', function($scope) { 
var columnDefs = [{ 
    headerName: "<input type=checkbox>", 
    field: "Select", 
    width: 120, 
    cellRenderer: function(params) { 
    var htmlElement = document.createElement("input"); 
    htmlElement.type = 'checkbox'; 
    return htmlElement; 
} 
}, { 
headerName: "Ref No", 
field: "rn", 
width: 120, 
template: '<a href="#/updateInspection" ng-bind="myDummyData.rn></a>' 
}, { 
headerName: "Postal Code", 
field: "pc", 
width: 120 
}, { 
headerName: "Zone Name", 
field: "zn", 
width: 120 
}]; 

$scope.myDummyData = [{ 
"rn": "HIP/12/TM-1", 
"pc": "400001", 
"zn": "Zone - 1" 
}, { 
"rn": "HIP/12/TM-1", 
"pc": "400001", 
"zn": "Zone - 1" 
}]; 

$scope.gridOptions = { 
columnDefs: columnDefs, 
rowData: $scope.myDummyData, 
enableFilter: true, 
enableColResize: true, 
enableSorting: true, 
rowHeight: 36, 
headerHeight: 36 
}; 

document.addEventListener('DOMContentLoaded', function() { 
    var gridDiv = document.querySelector('#myGrid'); 
    new agGrid.Grid(gridDiv, $scope.gridOptions); 
    $scope.gridOptions.api.setRowData($scope.myDummyData); 
}); 
}); 

HTML：値を表示して

<div ng-controller="myController"> 
<div id="myGrid" class="ag-fresh" ag-grid="gridOptions"></div> 
</div> 

すべての行が、テンプレートを用いたカラム1が表示されていません。それはng-bindと関係がありますか？

例としてthis linkを参照しました。 JSONデータを除いて、自分のデータを作成しました。

どうすれば解決できますか？

Answer 1

角度コンパイルをオンにする 角コンパイルは、グリッドオプションの属性angularCompileRowsをtrueに設定すると有効になります。