Loading angular view dynamically based on selection from dropdown

Question

The following is something that I'd like to accomplish with Angular but I'm not sure if it's even possible.

My form would be comprised of 3 views/templates each with it's own controller. Two views are fixed, the third view needs to by dynamically loaded based on a value selected from a dropdown in one of the fixed views. The view and controller name would be derived based on the selected value. If possible I'd like to dynamically load the javascript for the controller of the selected view as well.

I heard some rumblings about this possibly in Angular 2.0 but I'm not exactly sure how to approach it.

Any thoughts? I'm not stuck with Angular so if another framework would work better in this case please let me know.

allenhwkim · Accepted Answer · 2014-11-04 14:09:54Z

1

Unless you are talking about ng-route and $routeProvider, you can have it with ng-include.
By setting ng-include as dynamic, your html will be downloaded and replace the section.

NOTE: however, ng-include does not allow to have script tag in it. You need to go around using your own directive.

This is the example of using ng-include, http://plnkr.co/edit/nlGVNfSpJOjIfIXxpEKc?p=preview

  <body ng-app ng-init="dynamic='1.html'">
    <select ng-model="dynamic">
      <option value="1.html">dynamic 1</option>
      <option value="2.html">dynamic 2</option>
      <option value="3.html">dynamic 3</option>
    </select>
    dynamic: {{dynamic}}
    <div>Fixed 1</div>
    <div>Fixed 2</div>
    <div ng-include="dynamic"></div>
  </body>

edited Nov 4, 2014 at 14:09

answered Oct 10, 2014 at 21:48

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

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

2 Comments

Richard Edwards Over a year ago

Thanks. Actually I'd also like to load a corresponding javascript file with a controller, services etc. to handle the dynamic view. So for 1.html I'd need to somehow load and 1.js or something similar. I could probably just put it all in the html though at last resort.

Richard Edwards Over a year ago

I ended up just using ng-include. I found if I use jQuery then the script is executed without any problem. Example here, plnkr.co/edit/6kQYKU

Collectives™ on Stack Overflow

Loading angular view dynamically based on selection from dropdown

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related