详解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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
微信小程序实现上传图片功能
May 28 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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生成文件
2007/01/15 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python 远程开关机的方法
2020/11/18 Python
写给女朋友的道歉信
2014/01/12 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
欢迎领导标语
2014/06/27 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
酒会邀请函
2015/01/31 职场文书
债务纠纷起诉书
2015/05/20 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书