詳解AngularJS之$window窗口對象
更新時間：2018年01月17日 09:37:29 作者：翱翔天地
本篇文章主要介紹了AngularJS之$window窗口對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一個瀏覽器窗口對象的引用。它是一個全局對象，在window中是全局可用的，但是它導(dǎo)致一些問題。在Angular中也經(jīng)常通過$window服務(wù)提到它，因此它可以被重寫、刪除及測試。
驗證代碼：
$window 等同于 window。
(function(){
angular.module('Demo', [])
.controller('testCtrl',["$window",testCtrl]);
function testCtrl($window) {
$window === window;
}
}());
$window對象可以用來獲取瀏覽器窗口各項屬性（如窗口高度寬度、瀏覽器版本等等）。
1、問題背景
通過$window對象打印出輸入框的內(nèi)容
2、實現(xiàn)源碼
<!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、實現(xiàn)結(jié)果
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了angularjs實現(xiàn)時間軸效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
自定義Angular指令與jQuery實現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
這篇文章主要介紹了自定義Angular指令與jQuery實現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框 的相關(guān)資料,需要的朋友可以參考下2015-12-12
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請根據(jù)實際業(yè)務(wù)需求做相應(yīng)調(diào)整。2017-06-06
本篇文章主要介紹了angularJs中datatable實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了詳解Angular 自定義結(jié)構(gòu)指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了AngularJS 與百度地圖的結(jié)合實例的相關(guān)資料,需要的朋友可以參考下2016-10-10
Angular8引入百度Echarts進(jìn)行圖表分析的實現(xiàn)代碼
這篇文章主要介紹了Angular8引入百度Echarts進(jìn)行圖表分析的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
本篇文章主要介紹了淺談Angular文字折疊展開組件的原理分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了AngularJS中的http攔截，$http服務(wù)允許我們與服務(wù)端交互，有時候我們希望在發(fā)出請求之前以及收到響應(yīng)之后做些事情。即http攔截,需要的朋友可以參考下2016-02-02
AngualrJS中每次$http請求時的一個遮罩層Directive
AngularJS是一款非常強大的前端MVC框架。接下來通過本文給大家介紹AngualrJS中每次$http請求時的一個遮罩層Directive，本文非常具有參考借鑒價值，特此分享供大家學(xué)習(xí)2016-01-01