Binding a template to data in AngularJS

Question

I want to bind content from an template to data in an Angular application. The template is stored in an html file and contains binding expressions:

<div>
    <div class="case-header">
        <h3>Case Details</h3>
    </div>
    <div class="case-body">
        <div>
            <label>Case Number:</label><div>{{item.CaseNumber}}</div>
        </div>
        <div>
            <label>Name:</label><div>{{item.CandidateName}}</div>
        </div>
        ...
    </div>
</div>

The element providing the context and data for the template is a row in an ng-grid. In the function below, I create a new scope to contain the data for the current row. The contents of a template is retrieved from an html file and cached to a property when the controller is constructed. However, the $compile call does not bind the data as I want. The function returns the template markup with the binding expressions still in it. I have tried both styles of binding expression.

    $scope.getTooltip = function (row) {
        var scope = $scope.$new();
        scope.item = row.entity;
        var elem = angular.element($scope.template);
        var result = $compile(elem)(scope);
        return result.html();
    };

The call to $compile appears to be correct vis the documentation, but I guess I must have misunderstood something.

How do I get the data values injected into the template?

Plunker

Here's a Plunker to play with.

could you share you complete code in plunker or fiddle

Ajay Singh Beniwal
– Ajay Singh Beniwal

2013-07-03 16:58:42 +00:00
Commented Jul 3, 2013 at 16:58 — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 3, 2013 at 16:58
Added and linked above in main article.

Paul Taylor
– Paul Taylor

2013-07-03 17:36:01 +00:00
Commented Jul 3, 2013 at 17:36 — Paul Taylor
– Paul Taylor, Commented Jul 3, 2013 at 17:36

Ajay Singh Beniwal · Accepted Answer · 2013-07-03 18:50:11Z

1

The $compile(scope) returns a reference to original dom element or clone of it so you should append it to some element . I have updated your plunker http://plnkr.co/edit/qatH4XNKPxjPyicur67T?p=preview so see it working.

answered Jul 3, 2013 at 18:50

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

5 Comments

Paul Taylor Over a year ago

Thanks @Ajay, that works in the simplified Plunker I put up to illustrate the problem and is a good start. However I want the getTooltip function to return the bound html template so that I can inject that content by binding to the function name itself. I have updated my original Plunker to show what I mean. Is there any way of forcing Angular to bind the data without appending the compilation results to a DOM object?

Ajay Singh Beniwal Over a year ago

no you have to either make a directive or manually append dom to element to make interpolation work

Paul Taylor Over a year ago

Bizarre. Why would they have limited it that way?

Ajay Singh Beniwal Over a year ago

may be you should put this in angular issues on git hub site and they will better explain it

Prasad K - Google Over a year ago

Ajay, there is a problem with your plunker example. The binding doesn't work if you click the "Bind Template" button twice. What could be the reason?

Collectives™ on Stack Overflow

Binding a template to data in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related