详解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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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实现禁用IE和火狐的缓存问题
2012/12/03 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
jQuery实现增删改查
2020/12/22 jQuery
python超简单解决约瑟夫环问题
2015/05/12 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python实现五子棋人机对战游戏
2020/03/25 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
virtualenv介绍及简明教程
2020/06/23 Python
简述 Python 的类和对象
2020/08/21 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
写给爸爸的道歉信
2014/01/15 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
房屋转让协议书
2014/10/18 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
创业计划书之酒吧
2019/12/02 职场文书