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

AngularJS - 如何根据窗口大小调整更改.config（）上的变量

1 个答案: