Я пытаюсь загрузить данные из сетки внутри всплывающей подсказки.Эта всплывающая подсказка генерируется, когда пользователь наводит курсор на первый столбец внутри ui-grid.Я хочу использовать bootstrap, и html всплывающей подсказки отображается по мере необходимости.Я пробовал несколько способов, но теперь данные не отображаются.Пожалуйста, смотрите прикрепленную картинку.Я хочу фактическое значение {{row.entity.Status}}
Пожалуйста, см. Текущий код для справки https://codepen.io/brainzest/pen/bmqgLy?editors=0011
angular.module('GridDemo', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']).controller('MainCtrl', function($scope,uiGridConstants,$sce){
$scope.equipData = [
{ Status: "Maintenance",
PackageName: "Package 1",
Hours: "15,000",
},
{ Status: "Running",
PackageName: " Package 2",
Hours: "15,000",
},
{ Status: "Running",
PackageName: "Package 3",
Hours: "15,000",
},
{ Status: "Running",
PackageName: "Package 4",
Hours: "15,000",
},
];
$scope.gridOptions = {
enableSorting: true,
enableColumnResizing : true,
enableColumnMenus:false,
columnDefs: [{ field: 'PackageName', cellTemplate:'<div data-toggle="tooltip" title="\<table class=table-borderless><tbody><tr><td class=gray>Status</td><td class=yell>Data 2</td></tr><tr><td class=gray>Status</td><td class=yell>{{row.entity.Status}}</td></tr></tbody></table>" data-html="true" data-placement="right" ><div class="ui-grid-cell-contents">{{ COL_FIELD }}</div></div>'},
{ field: 'Hours'}],
data:$scope.equipData
};
}).directive('toggle', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
if (attrs.toggle=="tooltip"){
$(element).tooltip();
}
}
};
});