настраиваемая директива в шаблоне ячейки в ui-grid angularjs

Question

Я определяю ui-сетку для отображения данных, и я определяю шаблон ячейки, чтобы установить стиль столбца. В то же время я также создаю директиву, здесь я просто добавляю ее в шаблон ячейки. Но время выполнения функции связи меньше ожиданий.

Вот все это на 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); 
    } 
}; 
}) 

Вы можете получить журнал браузера для просмотра времени выполнения соединения.

В результате, когда количество данных велико, что появляется вертикальная прокрутка, когда мы перетаскиваем полосу прокрутки, пользовательская директива больше не будет выполнять функцию связи.

Answer 1

Вполне вероятно, что есть некоторая оптимизация, встроенная в ui-сетку, посредством чего они повторно используют уже связанные элементы строки, а не связывают новые.

Вы можете проверять, что (и, он должен получить вам то, что вам нужно) по $watch -ную изменения в объеме:

link: function ($scope, $element, $attrs) { 
    //console.log($scope.row.entity.Name); 
    $scope.$watch("row.entity.Name", function(v){ 
     console.log(v); 
    }); 
} 

Это будет отображать все строки при прокрутке.

Demo