Add external html template in angularjs

Question

I am using a directive to inject some specific content on my page. We have a requirement when the url attribute points to an html file and the contents of that file need to be rendered on my page. How can I do that

<section>
<block-with-html 
url = "locatiion of html file">
</block-with-html>
</section>

angular
.module('app.blockWithHtml', [])
.directive('blockWithHtml', BlockWithHtmlDirective);

 function BlockWithHtmlDirective(ConfigBlocksService) {
   return {
     restrict: 'E',
     scope: {
       url: '='
     },
     template: `
       <section  >
         <h4>block with html</h4>
         <div>content form the html file goes here</div>
       </section>
     `,
   }
 }

Rotem jackoby · Accepted Answer · 2018-08-04 11:43:07Z

1

If you want to pass fields which are not expressions, try this:

   <section>
       <block-with-html 
          type='image'
          url = "locataion of html file">
          </block-with-html>
    </section>

    angular
    .module('app.blockWithHtml', [])
    .directive('blockWithHtml', BlockWithHtmlDirective);

     function BlockWithHtmlDirective(ConfigBlocksService) {

    return {
        restrict: 'E',
        template: function(tElement,tAttr){
           //Use the tAttr.url 
          var imageTemplate   = '<img src="tAttr.url">';
          var dynamicTemplate = '<ng-include src=”getTemplateUrl(tAttr.url)”/>';

        return tAttr.type == 'image' ? imageTemplate : dynamicTemplate;
        }
        controller: function($scope) {
           $scope.getTemplateUrl = function(url) {
           //Some logic here..
        }
    }
    };

If you asking that the source template of the directive will be set "on the fly" according to a passed expression - it is not possible. The reason is that the template of the directive is being set on the compilation phase - this is where angularjs is 'opening' the template of all the directives and putting them on dom but the scope is not being created yet , this will happen in the link phase where angularjs goes over each directive's template and create a scope for it and bind all the events. For summary, you can't pass a template location based on an expression.

edited Aug 4, 2018 at 11:43

answered Aug 4, 2018 at 8:57

Rotem jackoby

22.9k14 gold badges145 silver badges140 bronze badges

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

2 Comments

Manohar Over a year ago

I'm not asking about the source template. I want to replace the div in the source template with the html content which I receive as a url parameter. if the url points to a image that that will be rendered in the block. In my case the url points to an html file , so I need to render the content of this file. Thanks for any help regarding this.

Rotem jackoby Over a year ago

Answer edited - tell me if this what you're looking for.

Collectives™ on Stack Overflow

Add external html template in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related