首頁 > 開發者 > JavaScript
詳解AngularJS之$window視窗對象，angularjswindow
一個瀏覽器視窗對象的引用。它是一個全域對象，在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"> <div ng-controller="winCon"> <input type="text" id="phone" maxlength="11" ng-model="phone"/> <button ng-click="showPhone();">顯示手機號</button> </div> </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><div ng-app="myApp" ng-controller="myCtrl"><h1>{{default}}</h1></div></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
