我想根据屏幕宽度更改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");
});
}
答案 0 :(得分:0)
您可以拥有一个指令或控制器来设置所包含内容的值:
e.g。
<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
e.g。
myApp.controller('MyController', ['$scope', function($scope) {
if($(window).width() < 1199)
$scope.template = "mytemplate1.html"
else
$scope.template = "mytemplate2.html"
}]);
但上述所有内容都是一个混乱,不安全,丑陋的解决方案。您应该使用CSS媒体查询来处理响应。