ui-grid angularjs 单元格模板中的自定义指令

Question

我定义了一个ui-grid来显示数据，我定义了一个单元格模板来设置列的样式。同时我还创建了一个指令，这里我只是将它添加到单元格模板中。但是 link 函数执行时间低于预期。

这是 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);
    }
};
})

可以获取浏览器日志查看link执行的时间

结果是当数据量大出现垂直滚动时，当我们拖动滚动条时，自定义指令将不再执行link功能。

Answer 1

很可能 quite 有一些优化 built 到 ui-grid，由此他们重用已经-linked 的行元素，而不是比 link 个新的。

您可以通过 $watch-ing 范围内的更改来检查（并且，它应该可以满足您的需求）：

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

这将在滚动时显示所有行。

Demo

ui-grid angularjs 单元格模板中的自定义指令

custom directive in cell template in ui-grid angularjs

angularjs

angular-ui-grid