Refresh page on route change without infinite loop

Question

I am trying to refresh every new page that AngularJS loads as follows:

Controller:

angular.module('adsomaApp')
  .controller('BrandsController', function ($window) {
    var vm = this;
    vm.init = function() {
      $window.location.reload();
    };
  });

View

<div class="container" ng-controller="BrandsController as vm" ng-init="vm.init()">Test</div>

Strangely, this causes the page to reload indefinitely. It gets stuck in a loop. Any idea how I can get it to reload once on route change?

I think the cause of the problem is here:

'use strict';

/**
 * @ngdoc directive
 * @name adsomaApp.directive:resize
 * @description
 * # resize
 */
angular.module('adsomaApp')
  .directive('resize', function () {
    return function (scope, $window) {
      var w = angular.element($window);

      scope.getWindowDimensions = function () {
        return {
          'h': screen.height,
          'w': window.innerWidth
        };
      };

      scope.$watch(scope.getWindowDimensions, function (newValue) {
        scope.windowHeight = newValue.h;
        scope.windowWidth = newValue.w;

        scope.youtubeBgVideoStyle = function () {
          return {
            'max-width': '1000%', 
            'margin-left': '0px', 
            'width': newValue.w + 'px',
            'min-height': '100vh', 
            'height': newValue.h + 'px',
            'margin-bottom': '-50%'
          };
        };
      }, true);

      w.bind('resize', function () {
        scope.$apply();
      });

      w.bind('load', function () {
        scope.$apply();
      });
    };
  });

How do I trigger this directive refresh on route change?

There’s an element on each page that doesn’t render correctly until the page is refreshed — methuselah, Feb 12 '18 at 08:45
@methuselah angularjs is an SPA, it's not meant to refresh. Wouldn't it be better to ask about why it doesn't render correctly? Also there is no strange behaviour in your example. You are calling `vm.init()` in your `ng-init` once the page is rendered after a refresh, which refreshes it in the function, causing an infinite loop. — Aleksey Solovey, Feb 12 '18 at 09:35
@AlekseySolovey is there a way around it? I think the cause of this error is this directive: https://pastebin.com/Ffmj7ars — methuselah, Feb 12 '18 at 10:15
@methuselah a **hack** would be to call a digest cycle instead. It is responsible for rendering any dynamic content (with watchers). That's why after any jQuery code (DOM manipulations), you would call `$scope.$apply()` to re-render the changes. So you may want to call that or `$scope.$digest()`. [Here is more about their difference](http://www.jstips.co/en/angular/angularjs-digest-vs-apply/) — Aleksey Solovey, Feb 12 '18 at 10:20
Ah I see, then how would I trigger this digest cycle on route change? — methuselah, Feb 12 '18 at 10:21
@methuselah since it's a directive, it might be enough to [delay the event](https://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive) after the render with `$timeout`. Just wrap your relevant function with it — Aleksey Solovey, Feb 12 '18 at 10:53
Did this, and it's not working: https://pastebin.com/Q6NpJ2Er. The changes aren't even applied on initial load — methuselah, Feb 12 '18 at 10:58
@methuselah now it's out of scope of the original question. I suggest asking a new question, explaining what you tried already. I'm not that familiar with directives, but `$timeout` **returns a Promise**, so I think `scope.youtubeBgVideoStyle = $timeout(...` syntax is wrong — Aleksey Solovey, Feb 12 '18 at 13:40

Refresh page on route change without infinite loop

0 Answers0