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
1 answers
solution1
7 ACCPTED 2013-03-14 07:14:07
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.