本篇文章主要介紹了AngularJS之$window視窗對象，現在分享給大家，也給大家做個參考。
一個瀏覽器視窗物件的參考。它是一個全域對象，在window中是全域可用的，但是它導致一些問題。在Angular中也經常透過$window服務提到它，因此它可以被重寫、刪除及測試。
驗證程式碼：
$window 等同于 window。
(function(){
angular.module('Demo', [])
.controller('testCtrl',["$window",testCtrl]);
function testCtrl($window) {
$window === window;
}
}());$window物件可以用來取得瀏覽器視窗各項屬性（如視窗高度寬度、瀏覽器版本等等）。
1、問題背景
透過$window物件列印出輸入框的內容
2、實作原始碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS之$window窗口对象</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("winApp",[]);
app.controller("winCon",function($window,$scope){
$scope.phone = "15969569556";
$scope.showPhone = function(){
$window.alert("您输入的手机号是："+$scope.phone);
};
});
</script>
</head>
<body ng-app="winApp">
<p ng-controller="winCon">
<input type="text" id="phone" maxlength="11" ng-model="phone"/>
<button ng-click="showPhone();">显示手机号</button>
</p>
</body>
</html>3、實作結果
#PS：angularjs中書寫window.resize功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $window) {
$scope.default = "hello world";
var w = angular.element($window);
w.bind('resize', function(){
console.log(new Date())
})
});
</script>
</head>
<body>
<p ng-app="myApp" ng-controller="myCtrl">
<h1>{{default}}</h1>
</p>
</body>
</html>上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
在Webpack中路徑壓縮圖片上傳尺寸獲取的問題（詳細教學）
在vue iview less echarts中實戰項目（詳細教學）
以上是詳細解讀AngularJS中$window視窗物件的概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！
