详解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判断录入的日期是否合法
Jan 08 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
window.location.hash 使用说明
Nov 08 Javascript
js日期相关函数总结分享
Oct 15 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 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获取MAC地址的函数代码
2011/09/11 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript Accessor实现说明
2010/12/06 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python中的字典详细介绍
2014/09/18 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
学校办公室主任职责
2013/12/27 职场文书
积极分子思想汇报
2014/01/04 职场文书
大学生村官任职感言
2014/01/09 职场文书
药店促销活动总结
2014/07/10 职场文书
技术股东合作协议书
2014/12/02 职场文书
停车场管理制度范本
2015/08/05 职场文书