AngularJS How to dynamically add HTML and bind to controller

by

I would use the built-in ngInclude directive. In the example below, you don’t even need to write any javascript. The templates can just as easily live at a remote url.

Here’s a working demo: http://plnkr.co/edit/5ImqWj65YllaCYD5kX5E?p=preview

<p>Select page content template via dropdown</p>
<select ng-model="https://stackoverflow.com/questions/19845950/template">
    <option value="page1">Page 1</option>
    <option value="page2">Page 2</option>
</select>

<p>Set page content template via button click</p>
<button ng-click="template="page2"">Show Page 2 Content</button>

<ng-include src="https://stackoverflow.com/questions/19845950/template"></ng-include>

<script type="text/ng-template" id="page1">
    <h1 style="color: blue;">This is the page 1 content</h1>
</script>

<script type="text/ng-template" id="page2">
    <h1 style="color:green;">This is the page 2 content</h1>
</script>

More Related Contents:

  1. How do I share $scope data between states in angularjs ui-router?
  2. AngularJS – How to use $routeParams in generating the templateUrl?
  3. How to get evaluated attributes inside a custom directive
  4. How to pass an object into a state using UI-router?
  5. How to detect browser back button click event using angular?
  6. AngularJS browser autofill workaround by using a directive
  7. Initializing select with AngularJS and ng-repeat
  8. Watch multiple $scope attributes
  9. How can I make an AngularJS directive to stopPropagation?
  10. How to use jQuery in AngularJS
  11. Print Html template in Angular 2 (ng-print in Angular 2)
  12. How to set expiration date for cookie in AngularJS
  13. Error: [ng:areq] from angular controller
  14. Angularjs: Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined
  15. Angular.JS: views sharing same controller, model data resets when changing view
  16. How to pass parameters to a modal?
  17. Angular 1.6.0: “Possibly unhandled rejection” error [duplicate]
  18. Dynamic form name attribute in Angularjs
  19. random orderBy in AngularJS 1.2 returns ‘infdig’ errors
  20. key-value pairs in ng-options
  21. deep merge objects with AngularJS
  22. Angular UI Router: decide child state template on the basis of parent resolved object
  23. AngularJS : Asynchronously initialize filter
  24. VueJs templating. How to load external templates
  25. Format Date time in AngularJS
  26. How to create a custom input type?
  27. Using page’s angular JS in chrome extension
  28. Scope issues with Angular UI modal
  29. Run jQuery code after AngularJS completes rendering HTML
  30. Use underscore inside Angular controllers

Leave a Comment