custom directive in cell template in ui-grid angularjs - angularjs

Question

I define a ui-grid to display data, and I define a cell template to set the column style. At the same time I also create a directive, here I just add it to the cell template. But the link function execution times is less than expectation.
Here's the whole thing on plunker: LINK
var app = angular.module("app", ['ui.grid']);
app.controller("dataCtrl", function ($scope, $element, $attrs) {
var vm = this;
vm.gridOptions = {
data: "ctrl.dataList",
columnDefs: [
{
name: "ID",
displayName: "User ID",
width: 200
},
{
name: "Name", displayName: "User Name",
cellTemplate: "<div class=\"ui-grid-cell-contents\" pop-tip><span style=\"margin-left:5px\">{{row.entity[\"Name\"]}}</span></div>"
}
],
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
noUnselect: true,
};
vm.dataList = [];
vm.loadData = function () {
for (var i = 1; i <= 100; i++) {
var user = {};
user.ID = i;
user.Name = 'user ' + i;
vm.dataList.push(user);
}
}
vm.loadData();
});
app.directive("popTip", function ($compile) {
return {
restrict: 'A',
scope: false,
link: function ($scope, $element, $attrs) {
console.log($scope.row.entity.Name);
}
};
})
You can get the browser log to view the time of link execution.
The result is that when the data amount is large that appears an vertical scroll, when we drag scroll bar the custom directive will not execute link function anymore.

Answer 1

It's quite likely that there is some optimization built into ui-grid, whereby they reuse already-linked row elements, rather than link new ones.
You could inspect that (and, it should get you what you need) by $watch-ing the changes in the scope:
link: function ($scope, $element, $attrs) {
//console.log($scope.row.entity.Name);
$scope.$watch("row.entity.Name", function(v){
console.log(v);
});
}
This will display all the rows when scrolling.
Demo