根据屏幕尺寸更改$ scope变量
[英]Change $scope variable based on screen size
问题描述
I have a sidebar which I collapse based on a value in $scope (let's say $scope.open for easy understanding). 
我有一个边栏，我会根据$scope的值折叠起来（为便于理解，我们假设$scope.open ）。 At the moment, when you click on the close/open button it just toggles that value, but if the menu is open it's going to look really ugly on mobile devices or small windows. 目前，当您单击关闭/打开按钮时，它仅会切换该值，但是如果菜单已打开，则在移动设备或小窗口上看起来确实很难看。 So, I want to close the menu (set $scope.open to false ) if the user is on a mobile sized device or using a small screen. 因此，如果用户使用移动设备或小屏幕，我想关闭菜单（将$scope.open设置$scope.open false ）。 Normally in CSS I would just use @media... and create a media query to add some styles on mobile devices, but in this case I want to do something similar but with a $scope variable. 通常在CSS中，我将只使用@media...并创建一个媒体查询以在移动设备上添加一些样式，但是在这种情况下，我想要执行类似的操作，但是要使用$scope变量。
Basically I want to do the equivalent of a media query but with my $scope.open variable to make sure the menu minimizes when on mobile. 基本上，我想做与媒体查询等效的工作，但是要使用$scope.open变量来确保菜单在移动时最小化。 Any ideas? 有任何想法吗？
4 个解决方案
解决方案1
1 2015-11-18 17:17:51
也许你可以做类似的事情
$scope.open = $(document).height() > 500; // can be different
解决方案2
0 2015-11-18 17:25:29
May be a good idea create a directive to access dom using jQuery: 创建一个使用jQuery访问dom的指令可能是一个好主意：
.directive('onloadDirective', function(){
return {
restrict: 'A',
scope: {
open: '='
}
link: function(scope, elem, attrs){
$(window).load(function() {
//get element
var myElement = $("#myElement");
if (myElement.width() > 100 && myElement.height() < 200) {
scope.open = true;
} else {
scope.open = false;
}
});
}
} }); }};
Solution with vanilla js and angular 香草js和angular的解决方案
.directive('onloadDirective', function(){
return {
restrict: 'A',
scope: {
open: '='
}
link: function(scope, elem, attrs){
window.onload = function() {
//get width
var w = window.innerWidth;
if (w > 100 && w < 200) {
scope.open = true;
} else {
scope.open = false;
}
});
}
} }); }};
and your HTML can be like this: 您的HTML可以像这样：
<body ng-controller="myController" onload-directive open="open">
</body>
解决方案3
0 2015-11-18 17:36:10
If you are using bootstrap, Then the right way would be to add hidden-xs and hidden-sm class to your sidebar div. 如果您使用的是引导程序，那么正确的方法是在sidebar div中添加hidden-xs和hidden-sm类。
This will hide the sidebar on mobile devices, While it will still be visible on all the devices having screen resolution ≥992px . 这将隐藏侧边栏在移动设备上，而在屏幕分辨率≥992px所有设备上仍将可见。 So it doesn't look bad on them. 因此，它们看起来并不差。
解决方案4
0 2015-11-18 18:14:11
Building on Luiz's answer, you can create a directive 以Luiz的答案为基础，您可以创建指令
.directive('onloadDirective', function($window){
return {
restrict: 'A',
scope: {
open: '='
}
link: function(scope, elem, attrs){
if ($window.innerWidth < 200) {
scope.open = true;
}
}
}
});
Add the directive to the body tag or your ui-view , bind to your scope variable (don't put primitive values on the scope - What are the nuances of scope prototypal / prototypical inheritance in AngularJS? ) 将指令添加到body标签或ui-view ，绑定到作用域变量（不要在作用域上放置原始值-AngularJS中作用域原型/原型继承的细微差别是什么？ ）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.