Question

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

以下是关于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-grid中内置了一些优化，它们重用已经链接的行元素，而不是链接新元素。

你可以通过$watch检查范围内的变化来检查（并且，它应该能满足你的需要）：

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中单元格模板中的自定义指令

1 个答案: