详解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 相关文章推荐
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
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脚本不报错的原因
2014/06/12 PHP
PHP的自定义模板引擎
2017/03/24 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js+html制作简单验证码
2017/02/16 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
学习python处理python编码问题
2011/03/13 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python如何实现反向迭代
2018/03/20 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
团支书的期末学习总结自我评价
2013/11/01 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
推荐信模板
2014/05/09 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
党委工作总结2015
2015/04/27 职场文书
高中物理教学反思
2016/02/19 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS