AngularJS: Multiple views with routing without losing scope -
i'm trying implement classic list/details ui. when clicking item in list, want display edit form item while still displaying list. i'm trying work around angular's 1-view-per-page limitation , decided having urls routed same controller/view. (perhaps root of problem , i'm open alternatives.)
routing:
$routeprovider .when('/list', { templateurl: '/partials/users.html', controller: usercontroller }) .when('/edit/:userid', { templateurl: '/partials/users.html', controller: usercontroller }) .otherwise({ redirectto: '/list' });
the view (/partials/users.html):
<!-- list of users --> <div ng-repeat="user in users"> <a href="*/edit/{{ user.id }}">edit {{ user.name }}</a> </div> <!-- edit form --> <div> {{ selecteduser.name }} </div>
controller:
function usercontroller($scope, $routeparams) { // model list $scope.users = getuserlistfromservice(); // model edit form if ($routeparams.userid != null) $scope.selecteduser = getuserfromservice($routeparams.userid); }
problems:
- when clicking edit link, controller reinstantiated new scope, have re-init users list. (in more complex example have input user stored bound model , lost.) i'd prefer persist scope previous route.
- i'd prefer use separate controller (or, many other angular developers have complained, ability have multiple displayed views!) leads same issue of losing scope.
try using ui-router: http://github.com/angular-ui/ui-router.
they have nested views , easier state management angular default routing :-)
Comments
Post a Comment