CODEWITHSUNDEEP
javascripthtmlangularjs
Tehreem
Tehreem

Reputation: 476

How to insert one html page into another html page using custom directive in AngularJS?

Using custom directives, I want to add one HTML page into another, how can this be done? The custom directive is as below:

(this is the .js file)
 fbModule.directive('fbLogin', function(){
        return {
            template : html
        }        
 })

And the html page to be included is:

(this is the .html file to be included)
<div ng-controller="fbCtrl">
    <button ng-click="doFacebookLogin">
        <img src="modules/shippingAddress/fastfill_fb.png" width="140px" height="25px;" style="margin-right: 8px; cursor:pointer">
    </button>
</div>

The page inside which the above code should come is:

(this is the .html file in which the above html should come)
<div fbLogin></div>
<div style="font-size: x-small; color: black;">Save on typing. Use your FB data.</div>

Please help.. Thanks in advance

Upvotes: 3

Views: 6409

Answers (5)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20751

you need to change template to templateUrl if you need to get the external html like as shown below.

templateUrl can also be a function which returns the URL of an HTML template to be loaded and used for the directive. Angular will call the templateUrl function with two parameters: the element that the directive was called on, and an attr object associated with that element.

Working Demo

  fbModule.directive('fbLogin', function() {
    return {
      template: 'template.html'
    };
  });

to

  fbModule.directive('fbLogin', function() {
    return {
      templateUrl: 'template.html'
    };
  });

Upvotes: 1

Goran Lepur
Goran Lepur

Reputation: 594

If you want to completely replace directive tag with html file loaded by directive you should use templateUrl: 'path/to/file.html' and replace: true so your directive tag gets replaced by html instead of being included into it. Here is the directive example:

app.directive('fbLogin', function(){
  return {
      templateUrl : 'include.html',
      replace: true
  }        
});

Also, here is the working plunker.

Upvotes: 0

manas
manas

Reputation: 6400

use templateUrl instead of template. your templateUrl must point to the html file in directory. here my templeUrl points to my.html that is inside template directory.

fbModule.directive('fbLogin', function(){
        return {
            templateUrl : "/templates/my.html"
        }        
 })

Upvotes: 0

Mesh
Mesh

Reputation: 6462

Basically: 

 fbModule.directive('fbLogin', function(){
         return {
             templateUrl : "...path to html"
         }});

...but read the Developers Guide https://docs.angularjs.org/guide/directive

Upvotes: 0

Patt-tom McDonnell
Patt-tom McDonnell

Reputation: 143

You should be using ngInclude to inject HTML into another page https://docs.angularjs.org/api/ng/directive/ngInclude

<ng-include src="somehtmlfile.html"></ng-include>

Upvotes: 2

Related Questions