custom directive in cell template in ui-grid 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.

New Dev · Accepted Answer · 2015-05-14 06:37:55Z

3

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

answered May 14, 2015 at 6:37

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ron Smith Over a year ago

Thank you, it make sense.Actually I need another attribute to get the row entity object. like $scope.dataSource=$scope.$eval($attrs.source), then I want output data according $scope.dataSource. But the result is also as begin. I have update the plunker. plnkr.co/edit/y36frn9gYMGJEy1hJU7f?p=preview

New Dev Over a year ago

@RonSmith, are you asking something or just noting - I wasn't sure

Ron Smith Over a year ago

I am sorry that I didn't describe clear. In order to reuse the custom directive, I want to get binding object according to another attribute, then use $scope.$eval to get it. But like this, the result is as start, i have update the plunker plnkr.co/edit/y36frn9gYMGJEy1hJU7f?p=preview

New Dev Over a year ago

what does it "the result is as start"? and if you want to reuse, I suggest using an isolate scope and pass the input directly

Ron Smith Over a year ago

The link function execution also less than total times. I don't know why. Basically I prepare use isolate scope, but there is another error with another three part library.

|

Collectives™ on Stack Overflow

custom directive in cell template in ui-grid angularjs

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related