반응형
창문 너비를 각도로 하려면 어떻게 해야 합니까?컨트롤러에서 크기를 조정하는 JS?
창문 너비를 각도로 하려면 어떻게 해야 합니까?컨트롤러에서 크기를 조정하는 JS?전시할 수 있도록 받고 싶습니다.div와 함께<div ng-if="windowWidth > 320">
창문을 얻을 수 있습니다.초기 페이지 로드에는 너비가 있지만 크기 조정에는 너비가 없습니다...
'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'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">
<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>이 답변에서 지침 내에서 어떻게 얻을 수 있는지는 설명하지만 컨트롤러 내에서 어떻게 작동시킬 수 있는지는 설명합니다.
가장 좋은 방법은 지시문을 사용하고 창 크기 조정 이벤트를 보는 것입니다.
'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 my-directive ng-if="windowWidth > 320">
여기 작동중인 플렁커가 있습니다.
피널리가 아래와 같이 일을 시켰습니다.https://stackoverflow.com/a/23078185/1814446 에서 대부분의 코드를 가져왔습니다.
유일한 차이점은.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>크기 조정 시 창 너비를 얻는 것은 Angular JS에만 해당되는 것이 아닙니다. 사실 Angular는 이를 수행하는 기능을 제공하지 않습니다.네이티브 자바스크립트로, 네이티브 윈도우 오브젝트는 접근할 수 있는 크기 조절 이벤트를 실행합니다.jQuery는 이것을 위한 편리한 포장지를 제공합니다.컨트롤러에서 간단한 콜백을 사용한 다음 이중 바인딩 창을 업데이트하여$scope 개체의 너비 속성 지시문을 사용하지 않고도 필요한 기능을 얻을 수 있습니다.
$(window).resize(function() {
$scope.windowWidth = $( window ).width();
});
이 코드를 컨트롤러에 포함시키기만 하면 매번 새 창 너비를 얻을 수 있습니다.
$scope.windowWidth = $window.innerWidth;
angular.element($window).bind('resize', function(){
$scope.windowWidth = $window.innerWidth;
$scope.$apply();
});
언급URL : https://stackoverflow.com/questions/41175143/how-can-i-get-the-window-width-in-angularjs-on-resize-from-a-controller
반응형
'source' 카테고리의 다른 글
| 웹 로직/오라클에서 JDBC 풀의 기본 스키마 지정 (0) | 2023.10.19 |
|---|---|
| MySQL-Server debian을 설치하려고 하면 mariadb-server-10.1이 설치됩니다. (0) | 2023.10.19 |
| 여러 특성에 걸쳐 트랙 바이 트랙이 있는 ng-repeat (0) | 2023.10.19 |
| jQuery를 사용하여 메타 태그를 읽을 수 있습니까? (0) | 2023.10.19 |
| 왜 페이지가 작동하지 않고 워드프레스 사이트에서 404 에러가 발생합니까? (0) | 2023.10.19 |