current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 0 down vote favorite

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
up vote 0 down vote

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
    
you can do it in fact, just is an ng-if around the read part and the edit part and itll work, but differents pages are definitively the way to go. Another way would be to create a directive defining an element that will recompile itself to change text element to input/dates accordingly, but that won't be an easy tasks – Walfrat May 26 at 14:43

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.