Marco Marco - 1 year ago 133
AngularJS Question

AngularJS Directive to include file content

I´m trying to create a directive in AngularJS for a small templating issue. In my HTML-File I have this:

<div myinclude="header.tpl.html"></div>

My directive should transform this to that:

<div>{content of file: header.tpl.html}</div>

This is how far (or not) I´ve come, but I guess, I´m missing a piece:

myApp.directive('myinclude', function () {
return {
compile: function compile( tElement, tAttributes ) {
console.log(tAttributes.myinclude); // logs filename
return {
templateURL: tAttributes.myinclude

Has anyone done something like this before, and is willing to share?

Answer Source

Here is the working plunker.

Try something like this:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $ = 'World';
    $scope.setValue = function(ele) {

 return {
     restrict : 'A',
      link : function(scope, element, attrs){
          scope.getContentUrl = attrs["myInclude"];
      template: "content of file : {{getContentUrl}}"


<!DOCTYPE html>
<html ng-app="plunker">

    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="" data-semver="1.4.8"></script>
    <script src="app.js"></script>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

 <div my-include="header.tpl.html"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download