jacopotarantino / angular-match-media

Angular module to use Bootstrap3 media queries in your angular controllers.
https://jack.ofspades.com/angular-matchmedia-module/
Other
135 stars 37 forks source link

screenSize.is executing every time histary.back() is executed #43

Open fromcouch opened 7 years ago

fromcouch commented 7 years ago

Hi

I'm using this library because my client wants different views for desktop and mobile. I'm using library in routes and are making me a little bit crazy.

I have this:

angular
  .module('app', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ui.bootstrap',
    'ngSanitize',
    'ngTouch',
    'matchMedia',
    'ngMap'
  ])
  .config(function ($routeProvider, USER_ROLES) {
    $routeProvider
      .when('/', {
        redirectTo: '/entry',
        data: {
          authorizedRoles: [USER_ROLES.all]
        }
      })
      .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        controllerAs: 'vm',
        data: {
          authorizedRoles: [USER_ROLES.all]
        }
      })
      .when('/entry', {
        templateUrl: 'views/entry_view.html',
        controller: 'EntryCtrl',
        controllerAs: 'entry',
        data: {
          authorizedRoles: [USER_ROLES.users, USER_ROLES.valid]
        },
        resolve: {
          mess: function($q, $location, $timeout, screenSize) {
            var deferred = $q.defer();

            $timeout(function() {
              if (screenSize.is('xs, sm')) {
                $location.path('/mobile/entry');
                deferred.reject();
              } else {
                deferred.resolve();
              }
            });

            return deferred.promise;
          }
        }
      })
      .when('/mobile/entry', {
        templateUrl: 'views/entry/mobile/lalala.html',
        controller: 'EntryMobileCtrl',
        controllerAs: 'entryMobile',
        data: {
          authorizedRoles: [USER_ROLES.teacher, USER_ROLES.valid]
        }
      })
      .when('/mobile/entry/members', {
        templateUrl: 'views/entry/mobile/members.html',
        controller: 'EntryMembersMobileCtrl',
        controllerAs: 'tmm',
        data: {
          authorizedRoles: [USER_ROLES.users]
        }
      })
/* and so on */
      .otherwise({
        redirectTo: '/',
        data: {
          authorizedRoles: [USER_ROLES.all]
        }
      });

  })
  .run(function($rootScope, $location, Authentication) {

    $rootScope.$on('$routeChangeStart', function(event, next, prev) {
      if ('$$route' in next && 'data' in next.$$route && 'authorizedRoles' in next.$$route.data) {
        var authorizedRoles = next.$$route.data.authorizedRoles;
        if (!Authentication.isAuthorized(authorizedRoles)) {
          $location.path('/login');
        }
      }

    });

    $rootScope.$on("$locationChangeSuccess",function(event,newUrl, oldUrl) {
      console.log("location: "+$location.path());
    });
  });

All works well but when i call $window.history.back() function from my headers screenSize.is is executed and user is moved to /mobile/entry

Anyone noticed about this?

Thanks