详解AngularJS之$window窗口对象

2024-08-03 04:32:14

一个浏览器窗口对象的引用。它是一个全局对象，在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、实现结果

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Angular.js中window.onload(),$(document).ready()的写法浅析

一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代码写在了window.onload()中了,又改成$(function(){})结果还是不行. 二,解决方案 1使用angular.element <script type="text/javascript"> angular.element(wi
详解AngularJS之$window窗口对象

一个浏览器窗口对象的引用.它是一个全局对象,在window中是全局可用的,但是它导致一些问题.在Angular中也经常通过$window服务提到它,因此它可以被重写.删除及测试. 验证代码: $window 等同于 window. (function(){ angular.module('Demo', []) .controller('testCtrl',["$window",testCtrl]); function testCtrl($window) { $window === wi
详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般
详解angularjs获取元素以及angular.element()用法

本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
详解AngularJS中的表单验证(推荐)

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证正则式验证只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?
详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g
JavaScript中的Window窗口对象

JavaScript中的Window窗口对象他是JavaScript中最大的对象,它描述的是一个浏览器窗口.一般要引用它的属性和方法时,不需要用"window.xxx"这种形式,而直接使用"xxx".一个框架页面也是一个窗口. Window窗口对象有如下属性: name 窗口的名称,由打开它的连接(<a target="...">)或框架页(<frame name="...">)或某一个窗口调用的 o
JavaScript入门教程(6) Window窗口对象

JavaScript中的Window窗口对象他是JavaScript中最大的对象,它描述的是一个浏览器窗口.一般要引用它的属性和方法时,不需要用"window.xxx"这种形式,而直接使用"xxx".一个框架页面也是一个窗口. Window窗口对象有如下属性: name 窗口的名称,由打开它的连接(<a target="...">)或框架页(<frame name="...">)或某一个窗口调用的 o
详解angularjs实现echart图表效果最简洁教程

本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下: ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 一 echart包引用下载解压,放入lib中. 下载地址:echart_jb51.rar 并在index.html中引用如图两个js文件. app.js中引用angular-echarts 二页面 html页面  <div> <donut-chart config=&quo
详解SpringBoot中Controller接收对象列表实现

如果Spring Boot中对应的Controller要接收一个对象,该对象中又存放了一个List列表,那么页面该如何传递相关应的参数信息呢. 本篇文章给大家一个简单的示例,提供一种实现方式. 实体类首先看实体类的结构(注意使用了Lombok): @Data public class Rules { private List<Rule> rules; } 对应Rule实体类代码如下: @Data public class Rule { /** * 类名 */ private String c
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据

pandas的DataFrame对象,本质上是二维矩阵,跟常规二维矩阵的差别在于前者额外指定了每一行和每一列的名称.这样内部数据抽取既可以用"行列名称(对应.loc[]方法)",也可以用"矩阵下标(对应.iloc[]方法)"两种方式进行. 下面具体说明: (以下程序均在Jupyter notebook中进行,部分语句的print()函数省略) 首先生成一个DataFrame对象: import pandas as pd score = [[34,67,87],[68

详解AngularJS之$window窗口对象

相关推荐

随机推荐