How to use the $compile service to include HTML data with AngularJS directives

Question

I have a controller which is populating content to content areas using ng-repeat. The issue is that some of this content needs to come front template files and so needs to be compiled 'on the fly'. Right now I have this function dynamically adding content:

$scope.layouts = [

    { id: 'Dashboard', icon: 'dashboard', view: '/qph/views/Dashboard.php' },
    { id: 'Customers', icon: 'people', view: '/qph/views/users.php' },
    { id: 'Quotes', icon: 'format_list_bulleted', view: '/qph/views/Quotes.php' }

];

$scope.workspace = {};    

var getTemplate = function(id){

    var view = 'test.php';

    $timeout(function() { //added timeout

    if($templateCache.get(view) === undefined) {
            $templateRequest(view).then(function (data) {
                $scope.workspaces.forEach(function (v) {
                    if (v.id == id) v.content = $compile(data)($scope);
                });
            });

    } else {
        $scope.workspaces.forEach(function (v) {
            if (v.id == id) v.content = $compile($templateCache.get(view))($scope);
        });

    }
    }, 2000);
};

$scope.workspaces =
    [
        { id: 1, name: "Dashboard", icon: 'dashboard', active:true  }
    ];
getTemplate(1);

I have checked that the data variable has the html content as expected, but the compile is outputting the following:

{"0":{"jQuery331075208394539601512":{"$scope":"$SCOPE","$ngControllerController":{}}},"length":1}

Does anyone know why its not compiling the html content as expected?

Here is the template content for reference:

<div class="col-sm-6 col-sm-offset-3" ng-controller="UserController">
<div class="col-sm-6 col-sm-offset-3">
    <div class="well">
        <h3>Users</h3>
        <button class="btn btn-primary" style="margin-bottom: 10px" ng-click="user.getUsers()">Get Users!</button>
        <ul class="list-group" ng-if="user.users">
            <li class="list-group-item" ng-repeat="user in user.users">
                <h4>{{user.name}}</h4>
                <h5>{{user.email}}</h5>
            </li>
        </ul>
        <div class="alert alert-danger" ng-if="user.error">
            <strong>There was an error: </strong> {{user.error.error}}
            <br>Please go back and login again
        </div>
    </div>
</div>
</div>

Here is the tabs view that is to display the compiled content:

<ul class="nav nav-tabs workspace-tabs">
    <li class="nav-item" ng-repeat="space in workspaces">
        <a class="nav-link" data-toggle="tab" href="#workspace{{space.id}}" ng-class="(space.active == true ) ? 'active show': ''">
            <span class="hidden-sm-up"><i class="material-icons md-24">{{space.icon}}</i></span>
            <span class="hidden-xs-down">{{space.name}}</span>
            <button ng-click="workspace.remove($index)">x</button>
        </a>
    </li>
</ul>

<div class="tab-content workspace-content">
    <div ng-repeat="space in workspaces" id="workspace{{space.id}}" class="tab-pane fade in" ng-class="(space.active == true ) ? 'active show': ''">
        {{space.content}}
    </div>
</div>

@PatricioVargas Everything coded here is reference from AngularJS resources. If there is something here that has a better alternative I'm all ears. — Paul
– Paul, Commented Sep 14, 2018 at 18:13
@PatricioVargas I've just read my post and I've not mentioned component once. I appreciate your looking at this, but I think this might not be something you can assist with, but thanks anyway. — Paul
– Paul, Commented Sep 14, 2018 at 18:28
@georgeawg An array in the scope is appended and is handled in a ng-repeat loop. I will add this part to the content above. — Paul
– Paul, Commented Sep 15, 2018 at 11:36

georgeawg · Accepted Answer · 2018-09-15 15:02:15Z

2

The $compile service creates a jqLite object that needs to be added to the DOM with a jqLite or jQuery append() method. Using interpolation {{ }} will only render the stringified value of the jqLite object.

<div class="tab-content workspace-content">
    <div ng-repeat="space in workspaces" id="workspace{{space.id}}" class="tab-pane fade in" ng-class="(space.active == true ) ? 'active show': ''">
        ̶{̶{̶s̶p̶a̶c̶e̶.̶c̶o̶n̶t̶e̶n̶t̶}̶}̶
        <compile html="space.html"></compile>
    </div>
</div>

Instead, use a custom directive to compile and append the HTML data to the DOM:

app.directive("compile", function($compile) {
    return {
        link: postLink,
    };
    function postLink(scope, elem, attrs) {
        var rawHTML = scope.$eval(attrs.html)
        var linkFn = $compile(rawHTML);
        var $html = linkFn(scope);
        elem.append($html);
    }
})

For more information, see AngularJS Developer Guide - HTML Compiler.

edited Sep 15, 2018 at 15:02

answered Sep 15, 2018 at 14:48

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

3 Comments

Paul Over a year ago

Thanks for this feedback. I tested this and it works, but only if the process happens quickly, ie the template doesn't take too long to load. It fails to render at all otherwise. I've added a timeout in the code above to simulate this.

georgeawg Over a year ago

If the other answer works for you, why not just use the ng-include directive?

Paul Over a year ago

That works! I'm new to Angular and did not know the ng-include directive would handle that, thank you :)

georgeawg · Accepted Answer · 2018-09-16 03:22:34Z

2

Use a directive.

app.directive('myCustomer', function() {
  return {
    templateUrl: 'test.php',
    controller: 'UserController'
  };
})

Template cache will be managed automatically.

edited Sep 16, 2018 at 3:22

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Sep 14, 2018 at 19:13

wikola

1113 bronze badges

1 Comment

Paul Over a year ago

Tried this one and it worked, however its static and so unable to receive a template name and return it. I'm testing to making it dynamic, but no luck yet.

Collectives™ on Stack Overflow

How to use the $compile service to include HTML data with AngularJS directives

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related