how to append a html template to a div/directive on click with angular js?

Question

i have this situation:

<somebutton></somebutton>

...

app.directive("somebutton", function(){
    return {
        restrict: "E",

        scope: {
          // not sure what i can do here
        },

        template: '<button ng-click="loadTemplate()" type="button">Text</button>',

        link: function(scope, element){
            scope.loadTemplate = function(){

                //TODO: append "home.html" template inside body directive
            }
        }
    }
});

...

<script type="text/ng-template" id="home.html">
    <div>home</div>
</script>

...

<div body ></div>

Other way of doing this could be to have the button in html instead of an template

<button ng-click="loadTemplate()" type="button">Text</button>

then maybe have a controller that has the loadTemplate() method that loads the template

but im not sure how this can be done.

Confusing? yes :)

Any ideas on this issue?

thanks

I recently started with Angular and sure doing things correctly is confusing for me ... consider like Angular HTML is considered as template so using other templating tools with Angular not sure... looking forward for some answers... — Anil Namde
– Anil Namde, Commented Mar 14, 2013 at 6:43

Gloopy · Accepted Answer · 2013-03-14 07:26:24Z

8

Take a look at ngInclude in case it fits your needs. You can bind it to a template url to dynamically change the loaded template.

Check out the documentation for an example as well as this simple plnkr.

<body>
  <button ng-click="template='home.html'">Home</button>
  <button ng-click="template='home2.html'">Home 2</button>
  <div ng-include src="template"></div>
</body>
<script type="text/ng-template" id="home.html">
    <div>loaded home</div>
</script>
  <script type="text/ng-template" id="home2.html">
    <div>loaded home 2</div>
</script>

Also note that most AngularJS apps are likely using the built in routing to load appropriate controllers and views based on the url. See the tutorial and documentation/example on $route for more information.

edited Mar 14, 2013 at 7:26

answered Mar 14, 2013 at 7:14

Gloopy

37.8k15 gold badges105 silver badges73 bronze badges

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

3 Comments

Patrioticcow Over a year ago

this will switch the templates alright. I am looking to load/append a template to a div/directive. My question might throw people a bit off

Gloopy Over a year ago

Ah in that case maybe the $compile documentation will help.

deFreitas Over a year ago

For me nothing happen

Collectives™ on Stack Overflow

how to append a html template to a div/directive on click with angular js?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related