angularjs - 如何根据屏幕宽度加载不同的html？

Question

我想siteType根据屏幕宽度更改值而不在视图部分进行编辑。

应用程序.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('!');
}]);

控制器.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 媒体查询来处理响应性。