核心提示：angularjs使用resize方法（代码实例）!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleTitle/titlestylep {bord...
angularjs使用resize方法（代码实例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
border: 1px solid red;
}
</style>
<script src="jquery.min.js"></script>
<script src="../angularjs/angular.min.js"></script>
<script>
var app = angular.module('miniapp', []);
function AppController($scope) {
$(window).resize(function() {
$scope.longg = $(window).width()
$scope.longH = $(window).height()
})
}
app.directive('resize', 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>
</head>
<body>
<p ng-app="miniapp" ng-controller="AppController" resize>
window.height: {{longg}}
window.height: {{longH}}
<!--window.height: {{windowHeight}}-->
<!--<br/>window.width: {{windowWidth}}-->
<br/>
</p>
</body>
</html>
