如何從控制器調整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中的窗口寬度？

回答

相關問題