0

I am using Angular ui router (https://github.com/angular-ui/ui-router) and coming across an unexpected behavior.

I have a recordView and recordEdit states set up and using sref/$state.transitionTo to switch between them.

When in recordEdit state, update is being done via ajax and upon success, I am programatically chaning the state into recordView. Problem is that the recordView state does not show the update data and will only show it if I refresh the page.

I tried using the reload option but with no success.

App.saveRecord($scope.formData).then(function (response) {  
                   $state.transitionTo('recordView', $stateParams, {
                       reload: true
                   });
}

I also tried using $state.go(...) but getting the same result.

I also tried using the cache = false on the state property but with no success.

.state('recordView', {
            url: '/folder/:hash/:recordId',
            resolve: {},
            cache: false,
            templateUrl: function (urlattr) {
                //return the url
            }
        })

I then tried explicitly changing the window.location to the view url but it will still show the previous data. The only time it will actually work is if I call location.reload(); after changing the state but this is not good for the user experience.

Does anyone know why this is happening? all the posts I've seen about it mention setting the reload to true or the cache to false.

UPDATE Per the comments I understand that the problem is that I am using ng-init and server side rendering to inject the data from php to angular and when reloading the view, this data is not reloading. My questions then are:

  • Can I "inject" the edited data from the recordEdit state into the recordView state after the user edited the data?
  • Is there a way to simply force a reload of the page and ignore the caching? Basically simulate as if the route was hit for the first time.

Thanks.

Improve this question
4
  • at what point are you getting the recordView Data? is that on the recordView controller, parent State or resolve section? Commented Nov 30, 2015 at 4:37
  • I'm using ng-init and php rendering to inject the data into the formData object (i.e ng-init="formData.first_name='<?php echo $first_name;?>''"). Commented Nov 30, 2015 at 4:45
  • thats the problem your view is initialized with the same data because is rendered with fixed data from the server and that data does not change no matter what you do. you need to change your rendering strategy to make it load the data via ajax or use state data to initialize it and the change that data when the update finishes Commented Nov 30, 2015 at 4:55
  • I was afraid this would be the answer. It's hard to change since there is a lot of going on on the server side (which is rendering the template) before angular. It's a complexed system with dynamic columns, fields, etc and hard to switch all rendering to angular. Is there not a way to simply force a page refresh and ignore the caching mechanism? I just want angular to force a reload of the view, exactly as it does the first time the view is being loaded? Commented Nov 30, 2015 at 4:58

2 Answers 2

Reset to default
0

Here is an idea. On your routes file define a parent abstract state and initialize that with the data

.state('parent.state'
  {
    abstract: true,
    data:{
      init://server rendered data here
    }
  }
)
.state('child.state.view',
  {
    // your route definition here
  }     
)
.state('child.state.edit',
  {
    // your route definition here
  }     
)

then in your controllers inject the $state service in yout view controller use 

//assuming the data variable holds the needed data. change that to what ever
$scope.data = $state.current.data.init; //if using $scope
this.state = $state.current.data.init; //if controller As syntax

Remove the ng-init sentence as the data will be initialized on the controller. Then on the Update function in the edit view make sure you update the $state.current.data.init with the new data. This way next time you go there the controller will pick the data from the $state object and get the updated one.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks! I'll have to try this as I am fairly new to Angular states. However it seems like adding more complexity to an already complexed application (there are other routes which will probably have the same issue) and I'd love if there was simple approach to force a reload of the whole route as if it was hit the first time. Must be a way to ignore the caching no??
forcing the state to reload will not fix your problem because the html is rendered from the server once and never changed, thats why i suggested to initialize on the state instead of the view but hey. feel free to dive in
Thanks. I meant forcing the route to ignore caching, hence forcing the whole cycle and reloading it from the server. But perhaps what I'm talking about does not exist?
here is an idea on the templateUrl for the state use a function and attach ?+timestamp on the end of the url that might request a new template from the server.
Could work I'll try both options you suggested thanks!
0

Answer:

$templateCache.remove('http://urlthemplate');
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.