How to reload page (angularJs)

Question

We have MVC application using AngularJs for front-end. The menu view has the following code

 <ul>
                                @foreach (var child in parent.Children)
                                {
                                    <li class="@MenuHelper.SetChildClass(child, ViewBag) childNode">
                                        <a href="@child.NavigateUrl">@child.Text</a>
                                    </li>
                                }
                            </ul>

We also have several single page forms in our application (so they are supposed to show just an index view). They have Cancel button that has the following code:

 $scope.cancel = function () {
                // window.console && console.log("Cancel fired");
                $scope.form.$setPristine();
                $scope.showForm = false; // close the form
                //$state.go('home', {}, { reload: "true" });
            };

So, here is the problem. From the main menu (or from the Favorites menu) I activate that single page form. I press the Cancel button. I then try to activate that menu again (say, from Favorites). And - nothing happens. I am only seeing spinning circle. That form's controller's code is never firing.

I believe the problem is in caching and that re-load never happens. My question is - what do I need to do to make sure that page is re-loading? I checked a few threads, but they are not using the code in the menu view I showed. I also tried the following in the js file of one of such pages:

app.config(['$stateProvider',function($stateProvider) {
        $stateProvider.state('home', {
            url: '/',
            template: '',
            cache: false
        }).
        state('edit', {
            url: '/edit/:id',
            cache: false
        }).state('new', {
            url: '/new',
            cache: false
        });
    }]);

E.g. I've added cache: false

But it made no effect. I think I need something in the menu file instead but I'm not sure how to fix that line @child.Text to make sure it re-loads.

EDIT: from comment.

My controller for the page in question has the following code:

app.controller('prefsSlsSearchController', ['$scope', '$rootScope', '$timeout', '$state', 'prefsSlsService', 'resourceFactory', function ($scope, $rootScope, $timeout, $state, prefsSlsService, resourceFactory) { 
var init = function () { 
  $scope.isEditLoading = true; 
  window.console && console.log("Init fired"); 
  $scope.disableAction = false; 
  $scope.showForm = false; 
  doSearch(); 
};

That msg never shows scnd time

score 1 · Answer 1 · answered Oct 13 '15 at 18:51

1

With ui-router you can use

$state.go($state.$current, null, { reload: true });

or

$state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });

or

$state.reload();

If you are using the $routePovider, you can use $route.reload();

answered Oct 13 '15 at 18:51

buzzsaw

1,476
1
10
14

The problem here is that we have main menu and that menu view has the code I posted. So, it has a href="page to go". And that's all I see so far. We do use ui-router in general, but I don't see where to put that code? As you see, I have defined states and I also tried adding reload: true to the function that is called from the Init of my controller for that page. But the Init is never firing – Naomi Oct 13 '15 at 18:56
I would need to see more of your code to be able to help at this point. There isn't enough to properly debug the issue you are having with what you have currently posted. If you can create a fiddle or plunker showing this problem, we can better help you diagnose the issue. – buzzsaw Oct 13 '15 at 19:02
My controller for the page in question has the following code: app.controller('prefsSlsSearchController', ['$scope', '$rootScope', '$timeout', '$state', 'prefsSlsService', 'resourceFactory', function ($scope, $rootScope, $timeout, $state, prefsSlsService, resourceFactory) { var init = function () { $scope.isEditLoading = true; window.console && console.log("Init fired"); $scope.disableAction = false; $scope.showForm = false; doSearch(); }; That msg never shows scnd time – Naomi Oct 13 '15 at 19:03
It's a very complex app:( We load menu in run-time. The menu has URL to go (I posted the code). When I invoke that URL first time, the page loads. When I do the second time, it shows spinning circle. Init method from page controller never fires in this case. So, I think I somehow need to change that line a href='somepage' to something that will always reload that page. Do you have ideas? – Naomi Oct 13 '15 at 19:06
My first suggestion, without knowing anything about how or where your methods are being called, is to make the init() function available on the scope so it is registered in Angular and can trigger a $digest cycle when called. eg: $scope.init = function () {...} – buzzsaw Oct 13 '15 at 19:10
Let me try that, although I'm not very hopeful. Thanks. – Naomi Oct 13 '15 at 19:32
No, this didn't seem to help. I put a break point in our Layout page that has this code

@RenderBody()
RenderBody is not firing when I try to go to that page again from the menu. It does fire the first time.
– Naomi Oct 13 '15 at 19:57
This is what I see in URL http://localhost:5525/AccountingAudit#/edit/1 and the spinning circle. – Naomi Oct 13 '15 at 19:59
I am thinking I'll try solution from here http://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers although I'm not 100% sure we do really want to disable the cache completely. But just to check it if will resolve the problem and I identified it correctly as cache problem. – Naomi Oct 13 '15 at 20:04
I've added this line to the head section of Layout page but it didn't change the behavior. I removed it. I am giving up that problem for the time being. – Naomi Oct 13 '15 at 20:13
I was able to partially resolve the problem by adding this line of code in the Cancel method: window.location.href = "/"; So, essentially I need to go to something else (ideally to /) in order for my Favorites to re-activate that page. The problem with that solution as this switch takes a long time. E.g. URL changes after about 20+ sec. delay. Do you know a better way to get the same effect? – Naomi Oct 19 '15 at 20:51

score 0 · Answer 2 · answered Oct 30 '15 at 11:12

0

In your controller you must pass $window . And use: $window.location.reload(); inside of your function.

It's works for me.

answered Oct 30 '15 at 11:12

agonzalezmc

113
1
3
13

How to reload page (angularJs)

2 Answers2