AngularJS - 如何更改基於窗口大小的.config（）上的變量

Question

我有這個代碼在波紋管，它工作正常！但我需要一些方向。更多細節在這篇文章的結尾。

'use strict'; 

angular.module('Authentication', []); 
angular.module('Home', []); 
angular.module('UserArea', []); 
angular.module('angular-responsive', []); 

angular.module('MyChef', [ 
    'Authentication', 
    'Home', 
    'UserArea', 
    'angular-responsive', 
    'ngRoute', 
    'ngCookies' 
]) 

.config(['$routeProvider', '$locationProvider', 'responsiveHelperProvider', function ($routeProvider,$locationProvider,responsiveHelperProvider) { 


    $locationProvider.html5Mode({ 
        enabled: true, 
        requireBase: false, 
    }); 

    var device = responsiveHelperProvider.$get() || 'desktop'; 

    $routeProvider 
     .when('/login', { 
      controller: 'LoginController', 
      templateUrl: 'modules/authentication/views/login.html' 
     }) 

     .when('/', { 
      controller: 'HomeController', 
      templateUrl: 'modules/home/views/' + device + '/home.html' 
     }) 

     .when('/home', { 
      controller: 'HomeController', 
      templateUrl: 'modules/home/views/' + device + '/home.html' 
     }) 


     .when('/user-area', { 
      controller: 'UserAreaController', 
      templateUrl: 'modules/user-area/views/user-area.html' 
     }) 


     .otherwise({ redirectTo: '/' }); 



}]) 
.run(['$rootScope', '$location', '$cookieStore', '$http', 
    function ($rootScope, $location, $cookieStore, $http) { 
     // keep user logged in after page refresh 
     $rootScope.globals = $cookieStore.get('globals') || {}; 
     if ($rootScope.globals.currentUser) { 
      $http.defaults.headers.common['x-access-token'] = $rootScope.globals.currentUser.authdata; // jshint ignore:line 
     } 


     $rootScope.$on('$locationChangeStart', function (event, next, current) { 
      // redirect to login page if not logged in 

      if ($location.path() !== '/login' && !$rootScope.globals.currentUser) { 
       if($location.path() == '/home' || $location.path() == '/'){ 
       $location.path('/home'); 
       } 
       else { 
       $location.path('/login'); 
       } 
      } 
     }); 
    }]) 
; 

的，這是供應商代碼：

'use strict'; 

angular.module("angular-responsive") 


.provider('responsiveHelper', function ResponsiveHelperProvider() { 

    var w = angular.element(window); 
    var screenMode = getMode(w); 
    this.$get = function() { 
    return screenMode; 
    }; 

}) 

function getMode(customWindow) { 
    //ecra 
    var ecraWidth = window.screen.width; 
    var ecraHeight = window.screen.height; 

    //resolution 
    var width = customWindow.innerWidth() || customWindow.outerWidth(); 
    var height = customWindow.innerHeight() || customWindow.outerHeight(); 
    var mode = 'desktop'; 
    console.log("WIDTH: " + width); 
    console.log("HEIGHT: " + height); 
    if(width < 768){ 
    mode = 'phone'; 
    } 
    else if(width > 768 && width <= 1024){ 
    mode = 'tablet'; 
    if(ecraWidth <= 420){ 
     mode = 'phone';  
    } 
    } 
    else { 
    mode = 'desktop'; 
    } 
    console.log("MODE: " + mode); 
    return mode; 
} 

此代碼工作得很好，當頁面重新加載。我只需要弄清楚在用戶調整窗口大小時如何做到這一點。我不知道如何將東西傳遞給提供者。請問你能幫幫我嗎？

Answer 1

您應該使用一個函數作爲templateUrl並從那裏返回一個值。

function getViewFunction(route) { 
    return function() { 
     var device = responsiveHelperProvider.$get() || 'desktop'; 
     return 'modules/home/views/' + device + route; 
    } 
} 

    $routeProvider 

     .when('/', { 
      controller: 'HomeController', 
      templateUrl: getViewFunction('/home.html') 
     }) 

... etc etc