Angularjs[7] - $scrope 中 $watch 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name">
            改变次数：{{count}}--{{name}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

var firstController = function ($scope) {
    $scope.name = ‘Alrale‘;
    $scope.date = {
        name : ‘Alrale‘,
        count : 20
    }
    $scope.count = 0;
    //当 model 每次改变时，都会触发第2个函数
    $scope.$watch(‘name‘,function (newValue,oldValue) {
        console.log(newValue);
        ++$scope.count;
        if($scope.count > 30){
            $scope.name = ‘已大于30次‘;
        }
    })

    $scope.$watch(‘date‘,function () {
        // $scope.$watch(‘date.name‘,function(){})
    },true)
}

Angular 内部的 watch 实现了页面的 model 的及时更新。
$watch(watchFn, watchAction, deepWatch)

　　watchFn: angular 表达式或函数字符串；
　　watchAction(newValue, oldValue, scope): watchFn 发生变化时会被调用；
　　deepWatch: 可选的布尔值命令检查被监控的对象的每个属性是否发生变化。

时间： 2024-12-20 13:55:06

Angularjs[7] - $scrope 中 $watch 方法：的相关文章

Angularjs[6] - $scrope 中 $apply 方法：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app> <div ng-controller="firstController"> {{date}} </div>

Angularjs $scope 里面的$apply 方法和 $watch 方法

Angularjs $scope 里面的$apply 方法和 $watch 方法学习要点:1. Angularjs $scope 里面的$apply 方法2. Angularjs $scope 里面的$watch 方法 1. Angularjs $scope 里面的$apply 方法$apply 方法作用:Scope 提供$apply 方法传播 Model 的变化$apply 方法使用情景:AngularJS 外部的控制器( DOM 事件.外部的回调函数如 jQuery UI 空间等)调用了

AngularJS 防止页面闪烁的方法

我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间.这里的间隔可能很小,甚至让人感觉不到区别:但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面. 这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上. 1.ng-cloak ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含

[Angularjs]处理页面闪烁的方法

摘要在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做“Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.”. 问题为了图方便,我们很喜欢使用下面的做法 <div>

angularJS实践过程中出现的问题总结

同名服务在一次项目里,之前是同事写的.我有一次在异步获取服务器上的数据时,习惯把api地址写在一个服务Store里,但是程序总是返回Store.api.get()里的get is undefined.知道肯定是Store.api为空造成的原因:但是觉得应该是没有问题的才对,最后看到在页面里又重新定义了一次Store服务,所以造成了覆盖. myApp.factory('Store',function(){ return{ name:'zhang', age:25 } }) myApp.facto

angularjs中常用的工具方法

一.angular.bind(self, fn, args) 1.作用:返回一个新的函数,绑定这个函数的this指向self 2.参数: self:新函数的上下文对象 fn:需要绑定的函数 args:传递给函数的参数 3.返回值:this指向self的新函数 4.备注:bind会根据你的参数类型来决定调用call或apply,所以args可以是一个个数据,也可以是一个数组. 二.angular.copy(source, [destination]) 1.作用:对象的深拷贝 2.参数: sourc

AngularJS 模块中的run方法

AngularJS中的run方法初始化全局数据,只对全局作用域起作用,如$rootScope.多个控制器之间可以共享数据,如下代码所示: [html] <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.run(['$rootScope',function($rootScope){ $rootScope.name = 'hello'; }]); console.log( m1 );

angularJs中的常用工具方法

前面说过在angularJs中使用 angular.module() 法可创建一个angularJs模块.除此之外,angularJs还提供了一些工具方法供我们使用. angular.isArray() //判断传入的参数是不是数组,是则返回true 否则返回false angular.isDate() //判断传入的参数是不是时间对象,是则返回true,否则返回false angular.isFunction() //判断传入的参数是不是函数,是则返回true,否则返回false angula

angularjs 可以加入html标签方法------ng-bind-html的用法总结（2）

angular-ngSanitize模块-$sanitize服务详解本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html(). 但是,出于安全考虑,如果我们直