如何从控制器调整angularJS中的窗口宽度？

何我可以从控制器调整大小的angularJS窗口的宽度？我希望能够得到它，所以我可以显示一些div与<div ng-if="windowWidth > 320">如何从控制器调整angularJS中的窗口宽度？

我可以得到初始页面加载WINDOWWIDTH但不能调整...

'use strict'; 
 

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

 
app.controller('mainController', ['$window', '$scope', function($window, $scope){ 
 
\t var mainCtrl = this; 
 
\t mainCtrl.test = 'testing mainController'; 
 
    
 
    // Method suggested in @Baconbeastnz's 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"> 
 
\t <p>{{mainCtrl.test}}</p> 
 
\t <hr /> 
 
    <p ng-if="windowWidth > 600">The window width is {{windowWidth}}</p> 
 
    <div my-directive ng-if="windowWidth > 320">It works!</div> 
 
</body>

我在this answer中看到他们解释了如何从指令中获取它，但是如何从控制器内部使其工作？

来源

2016-12-15 Holly

只是想知道，岂不是更好地处理问题，调整使用CSS？ – Harke

Finnally把它与下面的工作。采取了https://stackoverflow.com/a/23078185/1814446的大部分代码。

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

'use strict'; 
 

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

 
app.controller('mainController', ['$window', '$scope', function($window, $scope){ 
 
\t var mainCtrl = this; 
 
\t 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> \t \t \t  <p style="margin:0">window.width: {{windowWidth}}</p> \t \t \t  <p style="margin:0">{{mainCtrl.test}}</p> 
 
    </div> 
 
</body>

来源

2016-12-17 00:07:01 Holly

最好的方法是使用一个指令和监视窗口的resize事件：

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

来源

2016-12-15 23:49:23 Yaser

这似乎是最好的方法，但它在代码片段中不起作用。我用这个更新了我的问题中的代码片段，但它仍然不起作用。 – Holly

@Holy检查更新，我为你创建了一个plunker – Yaser

'.bind'函数已被弃用，所以最好使用'.on'。 https://docs.angularjs.org/api/ng/function/angular.element – Luke

在resize上获取窗口宽度并不是特定于Angular JS的。事实上Angular没有提供任何能力来做到这一点。它是原生JavaScript，本地窗口对象触发可以访问的resize事件。 jQuery为此提供了一个方便的包装。通过在你的控制器中使用一个简单的回调，然后更新$ scope对象上的双边界windowWidth属性，你可以在不使用指令的情况下获得所需的功能。

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

来源

2016-12-15 23:50:14 Baconbeastnz

你可以解释你的答案吗？ – Mistalis

在调整大小时获取窗口宽度并不是特定于Angular JS的。事实上Angular没有提供任何能力来做到这一点。它是原生JavaScript，本地窗口对象触发可以访问的resize事件。 jQuery为此提供了一个方便的包装。通过在你的控制器中使用一个简单的回调，然后更新$ scope对象上的双边界windowWidth属性，你可以在不使用指令的情况下获得所需的功能。 – Baconbeastnz

@Baconbeastnz，谢谢，但是当我在我的问题的代码片段中尝试了这一点，它不起作用，请参阅我的问题 – Holly

如何从控制器调整angularJS中的窗口宽度？

回答

相关问题