Clever Geek Handbook

How can I insert one html page into another html page using a custom directive in AngularJS?

Using custom directives I want to add one HTML page to another, how can this be done? The custom directive looks like this:

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

And the html page to be included:

(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 within which the above code should be listed:

(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

+3


source to share


5 answers


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

templateUrl can also be a function that returns the URL of the HTML template to download and use for this directive. Angular will call the templateUrl function with two parameters: the element that the directive was called and the 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'
    };
  });
+1


source


You have to use ngInclude to inject HTML into another page https://docs.angularjs.org/api/ng/directive/ngInclude



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


source


Basically:

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

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

0


source


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

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


source


If you want to completely replace the directive tag with the html file loaded by the directive, you must use templateUrl: 'path/to/file.html'

and replace: true

so that your directive tag is replaced by the html instead of being included in it. Here's an example of a directive:

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

Also, plunker works here .

0


source






More articles:


All Articles