如何根據屏幕寬度加載不同的html？

Question

我想根據屏幕寬度更改siteType的值，而無需在視圖部分進行編輯。

app.js

'use strict'; 
var app = angular.module('Location', []). 
    config(['$routeProvider', function ($routeProvider) { 
     $routeProvider. 
     when('/', { templateUrl: 'pages/' + **params.siteType** + '/locationList.html', controller: Location }). 
     when('/locationDetail/:projectId', { 
      templateUrl: function (params) { return 'pages/' + **params.siteType** + '/locationDetail.html'; }, 
      controller: Location 
     }). 
     otherwise({ redirectTo: '/' }); 
    }]) 

app.config(['$locationProvider', function($location) { 
    $location.hashPrefix('!'); 
}]); 

Controller.js

'use strict'; 
function Location($scope, $http, $routeParams) { 
    $scope.projectId = $routeParams.projectId; 
    $scope.selectedProject = null; 
    $scope.locationList = null; 
    $scope.siteType = "desktop"; 

    $(window).resize(function(){ 
     if(window.innerWidth < 600) { 
      $scope.$apply(function(){ 
       $scope.siteType = "mobile"; 
      }); 
     } else { 
      $scope.$apply(function(){ 
       $scope.siteType = "desktop"; 
      }); 
     } 
    }); 

    $http.get("location.json") 
    .success(function(data){ 
     $scope.locationList = data; 
     var indexedloc = []; 
     $scope.locationListToFilter = function(){ 
      indexedloc = []; 
      return $scope.locationList; 
     } 

     $scope.filterLocation = function(Loc){ 
      var locationIsNew = indexedloc.indexOf(Loc.field_data_field_location_field_location) == -1; 
      if(locationIsNew){ 
       indexedloc.push(Loc.field_data_field_location_field_location); 
      } 
      return locationIsNew; 
     } 

     $scope.returnFilterLoc = function(){return indexedloc}; 
     if($scope.projectId && $scope.projectId != null) { 
      for(var i = 0;i < $scope.locationList.length;i++){ 
       if($scope.locationList[i].tid == $scope.projectId) { 
        $scope.selectedProject = $scope.locationList[i]; 
       } 
      } 
     } 
    }) 
    .error(function(data) { 
     $("div.category-wrapper").html("Error"); 
    }); 
} 

Answer 1

你可以有一個指令或控制器設置包含什麼價值：

例如

<div ng-controller="MyController"> 
    <div ng-include="{{ template }}"></div> 
    </div> 

和控制器上的用戶可以根據窗口或文檔

$(window).height(); // returns height of browser viewport 
$(document).height(); // returns height of HTML document 
$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document 

例如在模板上的價值

myApp.controller('MyController', ['$scope', function($scope) { 
    if($(window).width() < 1199) 
     $scope.template = "mytemplate1.html" 
    else 
     $scope.template = "mytemplate2.html" 
}]); 

但以上所有都是一個混亂，不安全，醜陋的解決方案。您應該使用CSS媒體查詢來處理響應。