详解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中SQL语句的应用实现
May 04 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 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
星际争霸中的热键
2020/03/04 星际争霸
PHP的简易冒泡法代码分享
2012/08/28 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
python静态方法实例
2015/01/14 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
django解决跨域请求的问题
2018/11/11 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
在python shell中运行python文件的实现
2019/12/21 Python
django中的数据库迁移的实现
2020/03/16 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
应届生妇产科护士求职信
2013/10/27 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python