Как я могу получить ширину окна в angularJS при изменении размера от контроллера?

Хо можно ли получить ширину окна в angularJS при изменении размера от контроллера? Я хочу, чтобы получить его, чтобы я мог отображать некоторые div с <div ng-if="windowWidth > 320">

Я могу получить windowWidth на начальной загрузке страницы, но не изменять размер...

'use strict';

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

app.controller('mainController', ['$window', '$scope', function($window, $scope){
	var mainCtrl = this;
	mainCtrl.test = 'testing mainController';
  
    // Method suggested in @Baconbeastnz answer  
    $(window).resize(function() {
      $scope.$apply(function() {
        $scope.windowWidth = $( window ).width();
      });
    });
  
    /* this produces the following error
    /* Uncaught TypeError: mainCtrl.$digest is not a function(…)
    angular.element($window).bind('resize', function(){
        mainCtrl.windowWidth  = $window.innerWidth;
        // manuall $digest required as resize event
        // is outside of angular
        mainCtrl.$digest();
    });  
    */
}]);

// Trying Directive method as suggested in @Yaser Adel Mehraban answer.
/*app.directive('myDirective', ['$window', function ($window) {
     return {
        link: link,
        restrict: 'E'            
     };
     function link(scope, element, attrs){
       angular.element($window).bind('resize', function(){
           scope.windowWidth = $window.innerWidth;
       });    
     }    
 }]);*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<body ng-app="app" ng-controller="mainController as mainCtrl">
	<p>{{mainCtrl.test}}</p>
	<hr />
    <p ng-if="windowWidth > 600">The window width is {{windowWidth}}</p>
    <div my-directive ng-if="windowWidth > 320">It works!</div>
</body>

Ответы

Ответ 1

Впервые он получил работу с ниже. Взял большую часть кода из fooobar.com/questions/457883/....

Единственное различие заключалось в том, что для работы ng-if директива должна была быть помещена в родительский элемент html.

'use strict';

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

app.controller('mainController', ['$window', '$scope', function($window, $scope){
	var mainCtrl = this;
	mainCtrl.test = 'testing mainController';
}]);

app.directive('windowSize', function ($window) {
  return function (scope, element) {
    var w = angular.element($window);
    scope.getWindowDimensions = function () {
        return {
            'h': w.height(),
            'w': w.width()
        };
    };
    scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
      scope.windowHeight = newValue.h;
      scope.windowWidth = newValue.w;
      scope.style = function () {
          return {
              'height': (newValue.h - 100) + 'px',
              'width': (newValue.w - 100) + 'px'
          };
      };
    }, true);

    w.bind('resize', function () {
        scope.$apply();
    });
  }
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<body window-size my-directive ng-app="app" ng-controller="mainController as mainCtrl">
  <p>{{mainCtrl.test}}</p>
  <hr />
  <div ng-if="windowWidth > 500">
    <h4 style="margin:5px 0">It works!</h4>
    <p style="margin:0">window.height: {{windowHeight}}</p>			     <p style="margin:0">window.width: {{windowWidth}}</p>			     <p style="margin:0">{{mainCtrl.test}}</p>
  </div>
</body>

Ответ 2

Лучший способ - использовать директиву и смотреть событие изменения размера окна:

'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">

Вот рабочий plunker.

Ответ 3

Получение ширины окна при изменении размера не имеет ничего общего с Angular JS. фактически Angular не предоставляет никаких возможностей для этого. Собственный javascript, собственный объект окна запускает событие изменения размера, к которому вы можете получить доступ. Для этого jQuery предоставляет удобную оболочку. Используя простой обратный вызов в вашем контроллере, а затем обновляя свойство doubleWidthWidth на объекте $scope, вы можете получить необходимую функциональность без использования директивы.

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