Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a scenario were I am creating a page that should be editable. On click of an edit button, property names should change to textboxes (or datepicker, etc depending on the 'type' of the property).

Now I want this to update the url to '/edit', however I do not actually require a page transition. As the controller and view will stay the same but a boolean property, editMode, will be set to true and thus the input fields will become visible.

Can I create a nested state in the $stateProvider for this? Is a nested state even necessary here? I think it is because while a page transition is not necessary editMode is still a state (P.s. I love routing when thinking about it in terms of states!).

How can I achieve this with the ui router?

Thanks.

Test fiddle for the form: No page transition. Just toggling of form fields.

http://jsfiddle.net/s82h6kkp/

share|improve this question

1 Answer 1

You'll have to do something like this:

$stateProvider
    .state('users', {
        url: '/users',
        controller: 'users',
        templateUrl: 'users/users.html'
    })
    .state('users.edit', {
        url: '/users/edit',
        views: {
            edit: {
                templateUrl: 'users/edit.html'
            }
        }
    })

Don't forget to render your edit view

<!-- users/users.html -->
<div ui-view="edit"></div>
share|improve this answer
    
Thats the thing, I do not need a separate view for edit mode! See fiddle. –  Umair Sep 4 '14 at 16:36
    
You can not achieve this. Edit mode IS a state. You got a state - you make a route. You make a route - you'll have to load your view (event if its a small partial like in your case) –  M K Sep 4 '14 at 17:03
    
Not going to be possible with the setup I have! Ok thanks for your help. Manually job it is then... –  Umair Sep 4 '14 at 17:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.