custom directive in cell template in ui-grid angularjs -
i define ui-grid display data, , define cell template set column style. @ same time create directive, here add cell template. link function execution times less expectation.
here's 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 () { (var = 1; <= 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 browser log view time of link execution.
the result when data amount large appears vertical scroll, when drag scroll bar custom directive not execute link function anymore.
it's quite there optimization built ui-grid, whereby reuse already-linked row elements, rather link new ones.
you inspect (and, should need) $watch
-ing changes in scope:
link: function ($scope, $element, $attrs) { //console.log($scope.row.entity.name); $scope.$watch("row.entity.name", function(v){ console.log(v); }); }
this display rows when scrolling.
Comments
Post a Comment