Will using the AngularJS $compile service in a directive cause performance issues?

I'm developing an angular application where the main feature is a simple way to search for information from a PDM system. The search result is rendered as a table where the different columns /cells may be rendered differently depending on the type of the data value. So for instance we may render a URL as an icon in one column but as a normal link in another.

The search result table
I've used a directive to create the table cells and the directive keeps a reference to an object with different cell templates. The following are examples of two different templates.

    
var templates = {
view: {
        html: function (row, col) {
            var html;
            if (notEmpty(row['PVURL'])) {
                html = '<a target="_blank" ng-href="' + templates.decodeURL(row['PVURL']) + '">';
                html += '<img src="core/img/pv.gif" alt="Open in Creo View">';
                html += '</a>';
            }
            return html ? html : templates.general.html(row, col);
        }
    },

ThumbnailURL3D: {
        html: function (row, col) {
            var html;
            if (notEmpty(row['ThumbnailURL3D'])) {
                html = '<img src="' + templates.decodeURL(row['ThumbnailURL3D']) + '" alt="3D Thumbnail">';
            }
            return html ? html : templates.general.html(row, col);
        }
    }
}

Open in new window


The directive itself is implemented like this (templates is a reference to the object that holds the template code as shown above):

app.directive('pdsColumn', ['$compile', function ($compile) {
    return {
        scope: {row: '=pdsRow', col: '=pdsColumn'},
        replace: true,
        link: function (scope, element, attrs) {
            scope.tooltipKey = scope.col;
            var template = templates[scope.col] ? templates[scope.col] : templates.general;
            element.html(template.html(scope.row, scope.col));
            $compile(element.contents())(scope);
        }
    }
}]);

Open in new window


The directive is simply used when creating the cells in a normal html table as shown here.

<tr ng-repeat="row in table.rows">
    <td ng-repeat="col in table.columns | filter:{displayed:true}">
       <span pds-column="col.id" pds-row="row"></span>
    </td>
</tr>

Open in new window


So, with the stage set here are my questions:
While this does work quite well I worry that I have used the $compile service incorrectly and that this will come back to haunt me in the form of performance issues when the search result becomes big. Do you think that this is a valid concern and if so how would you go about implementing the same functionality? What is the best way to implement this type of dynamic table?

Any ideas, thought and discussions will be greatly appreciated.

Best Regards
Daniel Södling
Daniel SödlingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BigRatCommented:
The $compile service was designed for just this thing, and I think you have done that well. I don't think there will be a performance issue with "big" tables, because of the way one implements it.

You should limit the number of rows fetched from the database to basically fill a reasonably sized screen. Say 20-30. Then you either implement scrolling (forwards and backwards) and there are an awful lot of free samples around, or you implement infinite scrolling where you add the next 20-30 rows onto the end of the previous table, for which again, there are an awful lot of examples on the web.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Daniel SödlingAuthor Commented:
Sorry for the lack of attention on my part and thank you for taking the time to respond.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.