如何从控制器获取调整大小时的angularJS窗口宽度？

我如何从控制器获取调整大小时的angularJS窗口宽度？我希望能够获得它，以便可以使用

我可以在初始页面加载时获得窗口宽度，但不能在调整大小时获得

“严格使用”；
var-app=angular.module（'app'，[]）；
app.controller（'mainController'，['$window'，'$scope'，函数（$window，$scope）{
var mainCtrl=this；
mainCtrl.test='testing mainController'；
//@Baconbeastnz回答中建议的方法
$（窗口）。调整大小（函数（）{
$scope.$apply（函数（）{
$scope.windowWidth=$（window.width（）；
});
});
/*这会产生以下错误
/*未捕获类型错误：mainCtrl.$digest不是函数（…）
angular.element（$window.bind（'resize'，function（））{
mainCtrl.windowWidth=$window.innerWidth；
//manuall$调整大小事件所需摘要
//在角度之外
mainCtrl.$digest（）；
});  
*/
}]);
//尝试@Yaser Adel Mehraban答案中建议的指导方法。
/*app.directive（'myDirective'，['$window'，function（$window）{
返回{
链接：链接，
限制：“E”
};
功能链接（范围、元素、属性）{
angular.element（$window.bind（'resize'，function（））{
scope.windowWidth=$window.innerWidth；
});    
}    
}]);*/

{{mainCtrl.test}


窗口宽度为{{windowWidth}
它起作用了！
最好的方法是使用指令并观察窗口的调整大小事件：

'use strict';

var app = angular.module('plunker', []);

app.directive('myDirective', ['$window', function ($window) {

     return {
        link: link,
        restrict: 'A'           
     };

     function link(scope, element, attrs){

       angular.element($window).bind('resize', function(){
           scope.windowWidth = $window.innerWidth;
       });    
     }    
 }]);

并在您的div上使用它：

<div my-directive ng-if="windowWidth > 320">



这是一个工作。
在调整大小时获取窗口宽度并不是Angular JS特有的。事实上，Angular不提供任何这样做的能力。这是本机javascript，本机窗口对象触发您可以访问的调整大小事件。jQuery为此提供了一个方便的包装器。通过在控制器中使用一个简单的回调，然后更新$scope对象的double-bound windowWidth属性，您可以在不使用指令的情况下获得所需的功能

$(window).resize(function() {
  $scope.windowWidth = $( window ).width();
});

Finnaly用下面的代码实现了。从中获取了大部分代码

唯一的区别是
ng if
要工作，指令必须放在父html元素上


“严格使用”；
var-app=angular.module（'app'，[]）；
app.controller（'mainController'，['$window'，'$scope'，函数（$window，$scope）{
var mainCtrl=this；
mainCtrl.test='testing mainController'；
}]);
应用程序指令（'WindowsSize'，函数（$window）{
返回函数（范围、元素）{
var w=角度元素（$window）；
scope.getWindowDimensions=函数（）{
返回{
“h”：w.高度（），
“w”：w.宽度（）
};
};
scope.$watch（scope.getWindowDimensions，函数（newValue，oldValue）{
scope.windowHeight=newValue.h；
scope.windowWidth=newValue.w；
scope.style=函数（）{
返回{
‘高度’：（newValue.h-100）+‘px’，
“宽度”：（newValue.w-100）+“px”
};
};
}，对）；
w、 绑定（'resize'，函数（）{
作用域：$apply（）；
});
}
})

{{mainCtrl.test}


它起作用了！
window.height:{{windowHeight}
window.width:{{windowWidth}
{{mainCtrl.test}
只要将此代码包含在控制器中，您每次都会得到新的窗口宽度

$scope.windowWidth = $window.innerWidth;
angular.element($window).bind('resize', function(){
    $scope.windowWidth = $window.innerWidth;
    $scope.$apply();
});

你能解释一下你的答案吗？在调整大小时获取窗口宽度并不是Angular JS特有的。事实上，Angular不提供任何这样做的能力。这是本机javascript，本机窗口对象触发您可以访问的调整大小事件。jQuery为此提供了一个方便的包装器。通过在控制器中使用一个简单的回调，然后更新$scope对象的double bound windowWidth属性，您可以在不使用指令的情况下获得所需的功能。@Baconbeastnz，谢谢，但当我在问题的代码段中尝试此操作时，它不起作用，请参阅我的问题中更新的代码片段。您有几件事情做得不正确。已经为您修复了代码段。基本上，您需要使用$scope而不是'this'。此外，由于窗口大小调整事件发生在Angular域之外，因此需要调用$scope.apply手动通知Angular重新应用更改这似乎是最好的方法，但在代码段中不起作用。我用这个更新了我问题中的代码段，但它仍然不起作用。
.bind
函数已被弃用，因此最好在

上使用

。只是想知道，用CSS处理大小调整问题不是更好吗？@Harke有一些CSS无法解决的用例。例如，我需要显示大量的表格数据。在桌面上使用
元素是有意义的，但在移动设备上不起作用。用CSS隐藏它也不是最好的主意，因为数据会被渲染两次（即使它只显示一次）。