秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

  • $scope.$watch(watchFn , watchAction , deepWatch)

其中,watchFn是带有angular表达式或函数字符串;

watchAction是一个函数或者表达式,当watchFn发生变化时调用,如果是函数,其签名是function(newValue, oldValue, scope);

deepWatch如果是ture,则会检查被监控对象的每一个属性是否发生了变化。

<script type="application/javascript">
            var modelMy = angular.module(‘modelMy‘,[]);
            modelMy.controller(‘shopList‘,[‘$scope‘,function($scope){ //scope容易被压缩成简短的其他字符 可以用第二种方法
                $scope.unitPrice = 38;
                $scope.count = 3;
                $scope.fre = 8;
                $scope.total = function(){
                    return $scope.unitPrice * $scope.count;
                };
/*              $scope.$watch( ‘count‘ , function(value){  //监听$watch 单个‘‘
                    console.log(value);
                })*/
                $scope.$watch( $scope.total , function(value){ //监听$watch 函数
                    $scope.fre = value >= 100 ? 0 : 8;
                })
            }])
</script>
  • $scope.$apply
<body ng-app="myApp">
  <div ng-controller="MessageController">
    Delayed Message: {{message}}
  </div>
</body>
<script>
 var m1 = angular.module(‘myApp‘,[]);
  m1.controller(‘MessageController‘, function($scope) {
      $scope.getMessage = function() {
        setTimeout(function() {
          $scope.$apply(function() {  // 在这应用$apply方法
            $scope.message = ‘2秒后显示该文字‘;
            console.log(‘message:‘ + $scope.message);
          });
        }, 2000);
      }  

      $scope.getMessage();  

    });
</script>
时间: 2025-01-16 01:41:12

秒味课堂Angular js笔记------$scope.$watch和$scope.$apply的相关文章

Angular js笔记

Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunction angular.isNumber angular.isObject angular.isString angular.isElement angular.version angular.equals(a,b)      //只要是相同的元素返回true,不同返回假 angular.forE

拖拽组件3--转秒味课堂课件

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolut

弹窗组件1--转秒味课堂课件

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} .login{ background:white; border:1px #000

angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程 写JS的步骤 先实现布局 想出实现原理 了解JS语法 希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素 利用margin值 …… 获取元

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Angular JS学习笔记

之前的学习方法有点盲目,建议以后只看与工作有关的内容,并且多问那些是只和工作有关联的. 遇到问题的时候,项目不急的话,自己研究,项目急的话,马上问. 方法不对,再努力也没有用. Angular JS学习网站:http://www.zouyesheng.com/angular.html#toc7 [  项目有关的内容 ] ng-model ng-click ng-options ng-repeat ng-if ng-show ng-hide ng-controller ng-href(有印象) {

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决