angular $scope.$watch
在$scope内置的所有函数中,用得最多的可能就是$watch 函数了。当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知。
你可以监控单个对象的属性,也可以监控需要经过计算的结果(函数)。
实际上只要能够被当作属性访问到,或者可以当作一个JavaScript函数被计算出来,就可以被$watch 函数监控。
它的函数签名为$watch(watchFn, watchAction, deepWatch)
- watchFn
该参数是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次,所以你要保证它不会产生 其他副作用。也就是说,要保证它可以被调用很多次而不会改变状态。基于同样的原因,监控表达式应该很容易被计算出来。如果你使用字符串传递了一个 Angular表达式,那么它将会针对调用它的那个作用域中的对象而执行。
- watchAction
这是一个函数或者表达式,当watchFn 发生变化时会被调用。如果是函数的形式,它将会接收到watchFn的新旧两个值,以及作用域对象的引用。
其函数签名为function(newValue, oldValue, scope)。
- deepWatch
如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素,或者对象上的所有属性,而不只是监控一个简单的值,你就可以使用这个参数。由于Angular需要遍历数组或者对象,如果集合比较大,那么运算负担就会比较重。
注销监控器
$watch 函数会返回一个函数,当你不再需要接收变更通知时,可以用这个返回的函数注销监控器。
如果我们需要监控一个属性,然后接着注销监控,我们可以使用以下代码:
...
var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
…
dereg();
示例代码:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head> <body ng-app="myApp">
<div style="padding: 100px 500px 100px;" ng-controller="CartController">
<form class="form" role="form">
<div class="form-group" ng-repeat="item in items">
<span class="label label-default">{{item.title}}</span>
<input class="form-control" ng-model="item.quantity">
<span class="label-success"><div class="label label-info">单价:</div>{{item.price | currency}}</span>
<span class="label-success"><div class="label label-info">总价:</div>{{item.price * item.quantity | currency}}</span>
</div><br />
<div class="label label-primary">Total: {{totalCart() | currency}}</div>
<div class="label label-danger">Discount: {{discount | currency}}</div>
<div class="label label-primary">Subtotal: {{subtotal() | currency}}</div>
</form>
</div> <script src="js/CartController.js"></script>
</body> </html>
CartController.js
var app = angular.module('myApp', []);
app.controller('CartController', CartController);
CartController.$inject = ['$scope']; function CartController($scope) {
$scope.items = [{
title: 'Paint pots',
quantity: 8,
price: 3.95
}, {
title: 'Polka dots',
quantity: 17,
price: 12.95
}, {
title: 'Pebbles',
quantity: 5,
price: 6.95
}];
$scope.totalCart = function() {
var total = 0;
for (var i = 0, len = $scope.items.length; i < len; i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
return total;
}
$scope.subtotal = function() {
return $scope.totalCart() - $scope.discount;
}; function calculateDiscount(newValue, oldValue, scope) {
$scope.discount = newValue > 100 ? 10 : 0;
}
var dereg = $scope.$watch($scope.totalCart, calculateDiscount);
// dereg();
}
angular $scope.$watch的更多相关文章
- angularJS--神奇的$scope
我们在使用angularJS时,$scope对于angularJS是非常重要的,它是angularJS的基础,但$scope到底是什么呢?下面进行一些介绍. 1.$scope是一个普通的js对象 2. ...
- Spring标签之Bean @Scope
@Bean 的用法 @Bean是一个方法级别上的注解,主要用在@Configuration注解的类里,也可以用在@Component注解的类里.添加的bean的id为方法名 定义bean 下面是@Co ...
- AngularJS 从DOM中获取scope
节选官方文档: 原文:https://docs.angularjs.org/guide/scope scope是附加在DOM上,使用了ng-app指令的DOM就是root scope.一般是<h ...
- Forms in Angular 2
Input handling is an important part of application development. The ng-model directive provided in A ...
- angular中的scope
angular.element($0).scope() 什么是scope? scope是一个refer to the application model的object.它是一个expression的执 ...
- angualar入门学习-- 作用域$scope
作用域$scope: 是ng执行环境,视图与controller之间的胶水,双向绑定的基础 $scope提供里$watch方法,监听数据模型变化 $scope提供里$apply方法,将数据模型变化更新 ...
- AngularJS-01.AngularJS,Module,Controller,scope
1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.( MVC ---- Model(模型).View(视图).Controller(控制器) ) ...
- Event Binding in Angular
https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...
- Closure - Mimicking block scope
The basic syntax of an anoymous function used as a block scope (often called a private scope) is as ...
- 理解nodejs模块的scope
描述 原文档地址:https://docs.npmjs.com/misc/scope 所有npm模块都有name,有的模块的name还有scope.scope的命名规则和name差不多,同样不能有ur ...
随机推荐
- 【PHP】使用GD库实现 图像生成、缩放、logo水印和简单验证码
gd库是php最常用的图片处理库之一(另外一个是imagemagick),可以生成图片.验证码.水印.缩略图等等.要使用gd库首先需要开启gd库扩展, windows系统下需要在php.ini中将ex ...
- 安装与使用 Trac 来管理项目
1 概要 以 Windows 平台为例,讲述一下有关 Trac 的基本配置与使用,同时分享一下有关 Trac 的项目管理经验. 2 安装 Trac 前的准备工作 2.1 准备工作 安装 Pytho ...
- python基础---->python的使用(四)
这里记录一下python关于网络的一些基础知识.不知为何,恰如其分的话总是姗姗来迟,错过最恰当的时机. python中的网络编程 一.socket模板创建一个 TCP 服务器 import socke ...
- 【Spring源码分析系列】搭建Spring实现容器的基本实现
前言 bean是Spring中最核心的东西,因为Spring就像一个大水桶,而bean就像是容器中的水,先新建一个小例子来看一下: 一.使用eclipse构建项目,项目结构如下 二.类文件内容 < ...
- Windows系统的文件浏览器如何触发刷新
最近开发一个Drive程序,修改注册表添加System Folder Drive后需要通知已打开的每个文件浏览器刷新.最初选择获取对应窗体的句柄并发送WM_KEYDOWN.WM_KEYUP的VK_F5 ...
- 无线路由器无线AP模式的配置
环境介绍>>>>>>>>>>>>>>>>>>>交换机类型:三层交换机无线路由器品牌:T ...
- 【JAVA】猜数字
import java.util.*; public class GN { public static void main(String arg[]) { ;// 数字标记 ;// 位置标记 ;// ...
- Thinkphp框架下(同服务器下)不同二级域名之间session互通共享设置
在Thinkphp框架下根目录打开index.php 在头部加入如下代码即可: //入口文件 define('DOMAIN','abc.com');//abc.com换成自己的跟域名 //以下两行是为 ...
- Run-Time Check Failure #2 Stack around the variable ‘xxx’ was corrupted
在改别人代码时,运行报错: Run-Time Check Failure #2 Stack around the variable 'buffer' was corrupted 这表明你对某变量的赋值 ...
- css---媒体查询
简单示例: <style type="text/css"> /* 小于 300的时候 */ @media screen and (max-width: 400px){ ...