Nesting HTML Pages using AngularJS

Question

I'm trying to create a toggle between two tables. I have a button that when you click will change a search parameter in the URL using $location.search. I have each of the tables saved in separate HTML files.

I was wondering if it is possible to use createElement('div') to insert an HTML file into another one (I was thinking through a directive in the angular module). If that isn't possible, then how would I insert an HTML file into another HTML file from the module?

Thanks!

You will want to use jquery (or jquery lite) to do this. Yes encapsulating this in a directive will be a good idea. — trees_are_great
– trees_are_great, Commented Jun 19, 2015 at 14:17
I have tried using ngroute but you can't really route by a search query parameter — Evan Bennewies
– Evan Bennewies, Commented Jun 19, 2015 at 14:19
As @PavanAsTechie suggested. Just give a look to ui-router. It is a powerfull routing solution that can give you a way to define states and nested view. funnyant.com/angularjs-ui-router — Okazari
– Okazari, Commented Jun 19, 2015 at 14:40

Okazari · Accepted Answer · 2015-06-19 22:19:54Z

5

As it were suggested you should give a look at ui-router and define a nested view depending on the url parameter.

If you don't need a complete router you could do this using ng-show in angular.

Here is a plunker as exemple

I added on each table the ng-show attribute :

 ng-show="!switchTable" for table1
 ng-show="switchTable" for table2

And i added this ng-click on the button :

 ng-click="switchTable = !switchTable

edited Jun 19, 2015 at 22:19

answered Jun 19, 2015 at 15:03

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

2 Comments

Evan Bennewies Over a year ago

Thanks, that's how I first built it and it worked like a charm but now I need to incorporate the table name as a search query into the URL

Okazari Over a year ago

@EvanBennewies If you have some trouble using ui-router, feel free to ask, since this didn't answer your issue.

Collectives™ on Stack Overflow

Nesting HTML Pages using AngularJS

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