Complex nesting of partials and templates

by

UPDATE: Check out AngularUI’s new project to address this problem

For subsections it’s as easy as leveraging strings in ng-include:

<ul id="subNav">
  <li><a ng-click="subPage="section1/subpage1.htm"">Sub Page 1</a></li>
  <li><a ng-click="subPage="section1/subpage2.htm"">Sub Page 2</a></li>
  <li><a ng-click="subPage="section1/subpage3.htm"">Sub Page 3</a></li>
</ul>
<ng-include src="https://stackoverflow.com/questions/12863663/subPage"></ng-include>

Or you can create an object in case you have links to sub pages all over the place:

$scope.pages = { page1: 'section1/subpage1.htm', ... };

<ul id="subNav">
  <li><a ng-click="subPage="page1"">Sub Page 1</a></li>
  <li><a ng-click="subPage="page2"">Sub Page 2</a></li>
  <li><a ng-click="subPage="page3"">Sub Page 3</a></li>
</ul>
<ng-include src="https://stackoverflow.com/questions/12863663/pages[subPage]"></ng-include>

Or you can even use $routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;

<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

You can also put an ng-controller at the top-most level of each partial

More Related Contents:

  1. authentification with angular js
  2. Loading an AngularJS controller dynamically
  3. How to reduce javascript object to only contain properties from interface
  4. Set active tab style with AngularJS
  5. How to set default browser window size in Protractor/WebdriverJS
  6. Sort an object array by custom order
  7. How to use parameters within the filter in AngularJS?
  8. How can I access a variable outside a promise `.then` method?
  9. random orderBy in AngularJS 1.2 returns ‘infdig’ errors
  10. Changing route doesn’t scroll to top in the new page
  11. HTTP request from Angular sent as OPTIONS instead of POST
  12. Required attribute Not working with File input in Angular Js
  13. Why do angularjs controller declaration have this syntax structure?
  14. Angular UI-Router $urlRouterProvider .when not working *anymore*
  15. Stating directive templateUrl relative to root
  16. How to use HTTP.GET in AngularJS correctly? In specific, for an external API call?
  17. How to Unit Test Isolated Scope Directive in AngularJS
  18. WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400
  19. Two way binding not working in directive with transcluded scope
  20. angularjs form reset error
  21. Angular – extending $resource subobject with custom methods
  22. How can I invoke encodeURIComponent from angularJS template?
  23. Angular JS – Make service globally accessible from controllers and view
  24. Is there a more effective way to serialize a form with angularjs?
  25. FormData how to get or set boundary in multipart/form-data – Angular
  26. How to usemultiple Angular UI Bootstrap Datepicker in single form?
  27. How to set angular controller object property value from directive in child scope
  28. AngularJS: can’t get html5 mode urls with ui-route $state
  29. I don’t understand the use of $inject in controllers
  30. How to Create simple drag and Drop in angularjs

Leave a Comment