文档章节

谈$watch()

own1991
 own1991
发布于 2017/08/28 14:32
字数 293
阅读 5
收藏 0

主要监听某个值的变化,触发函数。在controller:$scope.$watch()  directive:$scope.$watch()

apply()——>digest()——>watch()

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表达式或函数的字符串被监听‘字符串’

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用 触发函数

deepWatch:可选的布尔值命令检查被监控的对象的每个属性是否发生变化 布尔值

<p>{{message}}</p><input ng-model="message" />
link:function(scope, element, attrs){
           scope.$watch('message', function(){
           console.log("dd")
            })

控制器里面:

<body ng-controller="MainCtrl">
    <input ng-model="name" />
    Name updated: {{updated}} times.
</body>
app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = "Angular";
  
  $scope.updated = -1;
  
  $scope.$watch('name', function() {
    $scope.updated++;
  });
});

运行

还回参数里面俩参数newValue, oldValue,当监听对象是不是字符串,如下面这样需要加 true

<body ng-controller="MainCtrl">
    <input ng-model="user.name" />
    Name updated: {{updated}} times.
  </body>
app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.user = { name: "Fox" };
  
  $scope.updated = 0;
  
  $scope.$watch('user', function(newValue, oldValue) {
    if (newValue === oldValue) { return; }
    $scope.updated++;
  }, true);
});

运行  运行对

项目案例:

var uploadFile = (['$stateParams', 'mzServer', function ($stateParams, mzServer) {
    return {
        restrict: 'EA',
        require: "ngModel",
        link: function (scope, element, attrs, ngModelController) {
            scope.$watch(attrs.ngModel, function (data) {
                if (attrs.required) {
                    ngModelController.$setValidity('uploadFile', false);
                }
                if (mzServer.isEmptyOrNull(data) || angular.isUndefined(data)) {
                    $(element).fileinput('refresh', { initialPreview: ["/images/no_img.jpg"], initialPreviewAsData: true, });
                }
                else {
                    var arrimg = [];
                        arrimg.push(attrs.readimg +"/"+ data);
                    $(element).fileinput('refresh', { initialPreview: arrimg, initialPreviewAsData: true, });
                    if ($stateParams.OpType.toLowerCase() == "query") {
                        $('.file-caption-main').hide();
                    }

                    ngModelController.$setValidity('uploadFile', true);
                }
            });

 

 

参考:http://xlows.blog.51cto.com/5380484/1425445

 

© 著作权归作者所有

共有 人打赏支持
own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
谈谈angularjs中$watch,$apply,$digest

大家都是到angularJS中非常屌的一个性能,数据双向绑定,这就意味着view中的数据发生任何变化的时候,这个变化也会相应的反映到scope上,也就是说scope的模型会动态更新。所以有时候我们的需...

邪气小生
2015/12/27
501
0
iOS逆向第四篇(dylib动态库注入和重签名打包)

在以前的文章中已经介绍过砸壳、Tweak创建动态库等逆向开放相关知识,今天主要介绍怎么把一个dylib的动态库注入到第三方项目中、重签名打包实现多开功能。 介绍这部分是为了接下来微信自动抢...

LvesLi
2017/11/16
0
0
apache StopWatch基本使用

pom: <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.6</version> </dependency> org.apache.commons.lang.time.StopWatch (1) privat......

Atom_me
2015/07/16
817
0
WatchOS系统开发大全(2)-WatchApp运行原理

WatchOS与iPhone交互框架 1.1-简介 我们都知道,一个App主要由两部分组成,一个是界面UI部分,一个是代码逻辑部分 在Wach OS1.0的Watch App中,界面UI是编译在App Watch上,代码逻辑编译在i...

u013263917
2017/07/27
0
0
pyinotify ERROR] add_watch: cannot watch

[2017-11-10 17:14:40,612 pyinotify ERROR] add_watch: cannot watch /usr/local/lib/python2.7/dist-packages/django/contrib/admin/locale/he/LC_MESSAGES/djangojs.mo WD=-1, Errno=No s......

Love轩轩
2017/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

09-利用思维导图梳理JavaSE-

09-利用思维导图梳理JavaSE-Java IO流 主要内容 1.Java IO概述 1.1.定义 1.2.输入流 - InputStream 1.3.输出流 - OutputStream 1.4.IO流的分类 1.5.字符流和字节流 2.InputStream类 2.1.File...

飞鱼说编程
2分钟前
0
0
Spring Cloud 微服务的那点事

在详细的了解SpringCloud中所使用的各个组件之前,我们先了解下微服务框架的前世今生。 单体架构 在网站开发的前期,项目面临的流量相对较少,单一应用可以实现我们所需要的功能,从而减少开...

我是你大哥
12分钟前
0
0
步步深入MySQL:架构->查询执行流程->SQL解析顺序

一、前言 一直是想知道一条SQL语句是怎么被执行的,它执行的顺序是怎样的,然后查看总结各方资料,就有了下面这一篇博文了。 本文将从MySQL总体架构--->查询执行流程--->语句执行顺序来探讨一...

Java干货分享
26分钟前
0
0
gson1.7.1线程并发导致空指针问题

java.lang.NullPointerExceptionat com.google.gson.FieldAttributes.getAnnotationFromArray(FieldAttributes.java:231)at com.google.gson.FieldAttributes.getAnnotation(FieldAttribut......

东风125
今天
3
0
以太坊RPC接口使用

以太坊RPC接口文档: https://github.com/ethereum/wiki/wiki/JSON-RPC#web3_clientversion 使用方式: 比如我要调用某个合约的balanceOf(address _owner)方法。 因为没有改变合约的状态,所以...

王坤charlie
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部