AngularJS Directive to include file content

Question

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?

Can you provide a plunker

Ranjith S
– Ranjith S

2015-12-10 07:32:08 +00:00
Commented Dec 10, 2015 at 7:32 — Ranjith S
– Ranjith S, Commented Dec 10, 2015 at 7:32
Sure: plnkr.co/edit/PLjjx2Xuxs1L2lkuvrSz

Marco
– Marco

2015-12-10 08:17:37 +00:00
Commented Dec 10, 2015 at 8:17 — Marco
– Marco, Commented Dec 10, 2015 at 8:17

ngLover · Accepted Answer · 2015-12-10 08:37:29Z

1

Here is the working plunker.

Try something like this:

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

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

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

HTML

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

  <head>
    <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="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>

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

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

</html>

edited Dec 10, 2015 at 8:37

answered Dec 10, 2015 at 7:34

ngLover

4,6183 gold badges23 silver badges42 bronze badges

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

11 Comments

Marco Over a year ago

Getting closer, but not exactly what I wanted to get:

<div myinclude="header.tpl.html" class="ng-scope"> <!-- ngInclude: getContentUrl() --> <div ng-include="getContentUrl()" class="ng-scope">{content of file: header.tpl.html } </div> </div>

ngLover Over a year ago

i gave what was explained can u please explain a bit more

Marco Over a year ago

I would rather have the DIV-Tag just filled with the content like this: <div>{content of file: header.tpl.html}</div>

ngLover Over a year ago

have you tried this --- .directive('myinclude', function() { return { restrict: 'E', link: function(scope, element, attrs) { scope.tmpName = attrs.myinclude; }, template: '{content of file: {{tmpName}} }' } });

Marco Over a year ago

Wouldn´t that just print {content of file: header.tpl.html}? I´d like to have the actual content of that file included between the DIVs. :-)

|

Avinash Raut · Accepted Answer · 2016-05-19 13:13:56Z

0

Its working...

app.directive('productDescription',function(){
return {
restrict:'E',
templateUrl: 'product-description.html'
};
});

answered May 19, 2016 at 13:13

Avinash Raut

2,1311 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS Directive to include file content

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related