详解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时间验证和转换工具小例子
Jul 01 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
JavaScript实现切换多张图片
Jan 27 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Using the TextRange Object
2006/10/14 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
javascript编写简易计算器
2017/05/06 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
python字符类型的一些方法小结
2016/05/16 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
教师节联欢会主持词
2015/07/04 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书