本篇主要介绍$watch的基本概念:

$watch是所有控制器的$scope中内置的方法:

$scope.$watch(watchObj,watchCallback,ifDeep)

watchObj:

需要被检测的对象,可以是以下任意一种:

1. 某个数据,监测这个数据的值是否发生变化

2. 一条angular表达式,监测表达式的结果是否发生变化

3. 函数(),监测函数的返回值是否发生变化

注意,以上三种,无论是哪种,都应该是字符串格式,并且都是在$scope作用域下执行的.

4.函数,非字符串格式,而是直接传入一个函数,可以直接写一个匿名函数,也可以传入一个函数,注意,它不是在$scope作用域下的,所以,如果传入的是当前作用域下的函数,还是需要写:$scope.fun

watchCallback :

接受一个函数或者表达式,当watchObj发生变化是会被调用或执行.

如果是函数形式,它会收到三个参数:

watchCallback (newValue,oldValue,scope)

newValue: watchObj的新的值

oldValue: watchObj的旧的值

scope: 就是当前控制器的$scope

注意:函数或者表达式不是在$scope作用域下执行的,所以,如果是需要调用当前作用域下的某个函数,应该$scope.watchCallback

ifDeep:

一个布尔值

如果 watchObj 的类型是对象或者数组的时候, ifDeep值设置为true, 那么angular会检测被监控对象的每个属性是否发生了变化,而不只是检测一个简单的值.

最后,$(watch)会返回一个函数,这个函数可以用来销毁该控制器,只需要被调用一次即可:

var destroy = $scope.$watch(...);

destroy()

下面看个最基本的例子:

<!DOCTYPE html>

<html ng-app>

<head>

  <title>11.1$watch监控数据变化</title>

  <meta charset="utf-8">

  <script src="../angular.js"></script>

  <script src="script.js"></script>

  <style type="text/css">

    *{

      font-family:'MICROSOFT YAHEI';

      font-size:12px

    }

  </style>

</head>

<body>

<div ng-controller = "Watch">

  <input type="text" ng-model="number"/>

  <span>{{result}}</span>

</div>

</body>

</html>
function Watch ($scope){

    $scope.number = 0;

    $scope.count = function(newValue,oldValue,scope){

        $scope.result = $scope.number*3;

        console.log(newValue);

        console.log(oldValue);

        console.log(scope);

        return $scope.result

    };

    $scope.$watch('number',$scope.count,false)

}

我们监测了number这个数据,当number发生变化时,即调用count这个函数,改变result的值.

其中,count中的三个参数分别接受了number的新值,旧值,以及当前控制器的$scope:

比如我在文本域中输入3:

------------------------------------------------------------------------------------------------------------------------------------

遗留问题:

在$watch的第一个参数中传入一个函数时,即使该函数并没有返回值,一样可以被监测.so,不明白它究竟是在监测什么东西的变化.

例子可以参考下一篇笔记http://www.cnblogs.com/liulangmao/p/3723385.html

from： http://www.cnblogs.com/liulangmao/p/3722885.html

【转】angular学习笔记(十四)-$watch(1)的更多相关文章

  1. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  2. angular学习笔记(十四)-$watch(3)

    同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...

  3. angular学习笔记(十四)-$watch(2)

    下面来看一个$watch的比较复杂的例子: 还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子, 给它添加一个计算总价和折扣的 ...

  4. angular学习笔记(十四)-$watch(4)

    如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...

  5. angular学习笔记(十五)-module里的'服务'

    本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...

  6. angular学习笔记(十九)-指令修改dom

    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...

  7. angular学习笔记(十六) -- 过滤器(2)

    本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...

  8. angular学习笔记(十六) -- 过滤器(1)

    本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...

  9. angular学习笔记(十)-src和href处理

    本篇主要介绍angular中图片的src和链接的href的处理: 用到了以下两个属性: ng-src: 绑定了数据的路径表达式 ng-href: 绑定了数据的路径表达式 例如: <!DOCTYP ...

随机推荐

  1. 【BZOJ 1295】 [SCOI2009]最长距离

    Description windy有一块矩形土地,被分为 N*M 块 1*1 的小格子. 有的格子含有障碍物. 如果从格子A可以走到格子B,那么两个格子的距离就为两个格子中心的欧几里德距离. 如果从格 ...

  2. CocoaPods - 在 Mac 中的生与死

    1. 集成 Cocoapod: 1.1 安装 ruby环境 mac 系统默认有 Ruby 环境, 通过 $ ruby -v 可以查看当前的 Ruby 版本.  如果 Ruby 版本过低可以通过 rvm ...

  3. 然爸读书笔记（2013-5）----Rework(重来)

    (1)你没有必要耗尽你一生的积蓄,承担财务风险. (2)你可以一边继续日常工作,一边开始创业,这样随时都能有现金满足需要.你甚至不需要办公室. 现在可以在家工作,和从未见面离你千里之外的人合作. (3 ...

  4. [搜片神器]BT种子下载超时很多的问题分析

    继续接着第一篇写:使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)[搜片神器] 谢谢园子朋友的支持,已经找到个VPS进行测试,国外的服务器: h31bt.org  大家可以给提点意 ...

  5. [转载]C#设置开机启动

    原理就是在注册表启动项里添加一项.路径:SOFTWARE\Microsoft\Windows\CurrentVersion\Run或者直接:运行->regedit找到这个路径添加一项. usin ...

  6. AlphaGo 已经战胜了李世石，而你还不知道什么是机器学习？

    谷歌人工智能 AlphaGo 与韩国棋手李世石 3 月 15 日进行了最后一场较量,最终比赛结果为 AlphaGo 4:1 胜李世石,人机围棋大战巅峰对决至此落幕.我不知道大家有没有被震撼到,反正我的 ...

  7. c++ ANSI、UNICODE、UTF8互转

        static std::wstring MBytesToWString(const char* lpcszString);    static std::string WStringToMBy ...

  8. （转）eclipse快捷键

    Eclipse常用快捷键 Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1. [ALT+/] 此快捷键为用户编 ...

  9. 使用eclipse远程调试Tomcat的方法

    tomcat是一种非常常见的java web应用服务器,有时候服务器可能并不是部署在本地,而是部署在远程其他的机器上,我们用eclispe该如何进行debug调试呢? 1. 在eclispe中新建we ...

  10. iOS如何把导航默认的返回按钮设置成“返回”

    版权声明:本CSDN博客所有文章不更新,请关注标哥博客:http://www.henishuo.com/ - (void)addBackItemWithAction:(SEL)action { if  ...