angularjs - multiple nested views with their own router -
i building angular app nested views using ui-router. app has list of posts, each own nav menu change post's view.
to simplify context, lets each nav menu can change theme of post attached to.
post 1 content [light theme button] [dark theme button] -------------------------------------------- post 2 content [light theme button] [dark theme button] -------------------------------------------- * * *
the problem facing when press button on 1 post's nav menu, posts change. want nav menu each post effect respective post.
i total beginner angular , questions are:
- is problem want solve ui-router? (do want have router each post?)
- if is, how solve it?
- if not, can point me in right direction?
any appreciated, whether link, explanation, code or comment.
ps. in reality not changing theme, changing content on post completely. in future want implement more 2 options menu options.
here code using (modified bit remove redundancy):
main.js:
angular.module('app',['ui.router']) .config(function($stateprovider, $urlrouterprovider) { $urlrouterprovider.otherwise('/postlist'); $stateprovider .state('postlist', { url: '/postlist', templateurl: 'listview.html', controller: listctrl }) .state('postlist.light', { templateurl: 'pollviewlight.html', controller: polllightctrl }) .state('postlist.dark', { templateurl: 'pollviewdark.html', controller: polldarkctrl }) });
simplified part of index.html:
<nav> <ul> <li><a ui-sref="postlist">post list</a></li> </ul> </nav> <div class="container"> <div ui-view></div> </div>
listview.html:
<div class="row" ng-repeat="post in posts"> <div class="col"> <div ui-view></div> <ul class="nav nav-pills"> <li><a ui-sref=".light">light theme</a></li> <li><a ui-sref=".dark">dark theme</a></li> </ul> </div> </div>
Comments
Post a Comment