欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解AngularJS之$window窗口對象

 更新時(shí)間：2018年01月17日 09:37:29   作者：翱翔天地  
本篇文章主要介紹了AngularJS之$window窗口對象，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一個(gè)瀏覽器窗口對象的引用。它是一個(gè)全局對象，在window中是全局可用的，但是它導(dǎo)致一些問題。在Angular中也經(jīng)常通過$window服務(wù)提到它，因此它可以被重寫、刪除及測試。

驗(yàn)證代碼：

$window 等同于 window。
 (function(){
   angular.module('Demo', [])
   .controller('testCtrl',["$window",testCtrl]);
   function testCtrl($window) {
     $window === window;
   }
 }());

$window對象可以用來獲取瀏覽器窗口各項(xiàng)屬性（如窗口高度寬度、瀏覽器版本等等）。

1、問題背景

通過$window對象打印出輸入框的內(nèi)容

2、實(shí)現(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("您輸入的手機(jī)號是："+$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();">顯示手機(jī)號</button> 
    </div> 
  </body> 
</html>

3、實(shí)現(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)文章

最新評論