文档章节

谈$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
redis源码分析之事务Transaction(上)

这周学习了一下redis事务功能的实现原理,本来是想用一篇文章进行总结的,写完以后发现这块内容比较多,而且多个命令之间又互相依赖,放在一篇文章里一方面篇幅会比较大,另一方面文章组织结...

凌风郎少
2017/11/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 眼看着这颗陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
29分钟前
45
6
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
今天
2
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部