详解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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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获取错误信息的方法
2015/07/17 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
angular4中关于表单的校验示例
2017/10/16 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
C#怎么让一个窗口居中显示?
2015/10/20 面试题
就业自我评价
2014/02/04 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
小学课外活动总结
2014/07/09 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
信访稳定工作汇报
2014/10/27 职场文书
民主生活会汇报材料
2014/12/15 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
MySQL 数据库范式化设计理论
2022/04/22 MySQL