详解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 form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jquery使用经验小结
May 20 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
JS中substring与substr的用法
Nov 16 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php 购物车实例(申精)
2009/05/11 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
Underscore源码分析
2015/12/30 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python分析学校四六级过关情况
2017/11/22 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python timeit模块的使用实践
2020/01/13 Python
Python的历史与优缺点整理
2020/05/26 Python
keras实现多种分类网络的方式
2020/06/11 Python
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
小小的船教学反思
2014/02/21 职场文书
学用政策心得体会
2014/09/10 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers