详解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 上下滚动广告
Jun 17 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
解析link_mysql的php版
2013/06/30 PHP
PHP处理会话函数大总结
2015/08/05 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python实现截屏的函数
2015/07/25 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python3匿名函数用法示例
2018/07/25 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
python自动生成sql语句的脚本
2021/02/24 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
优秀护士先进事迹
2014/05/08 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
党员检讨书范文
2014/12/27 职场文书