详解AngularJS之$window窗口对象


Posted in Javascript onJanuary 17, 2018

一个浏览器窗口对象的引用。它是一个全局对象,在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、实现结果

详解AngularJS之$window窗口对象

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
js返回顶部实例分享
Dec 21 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
React-native桥接Android原生开发详解
Jan 17 #Javascript
vue自定义指令directive实例详解
Jan 17 #Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 #Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 #Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 #Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 #Javascript
You might like
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解package.json版本号规则
2019/08/01 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
详解python中的数据类型和控制流
2019/08/08 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
会计专业大学生求职信范文
2014/01/28 职场文书
促销活动总结范文
2014/04/30 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
python中的getter与setter你了解吗
2022/03/24 Python