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

angularjs, button, html, javascript, templates

Solution

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.

Problem

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

Original source