控制器内,$scope有个$apply方法,可以代码更改model并同步更新页面。通常,控制器内的方法执行完毕后仅会自动刷新一次页面展示,使用$apply方法即可在想刷新页面时就刷新。如本例,这个方法接收function类型的参数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
{{ date }}
<br><br>
{{ count }}
</div>
</div>
<script>
//用 $scope的$apply方法实现每秒自动刷新model
angular.module('myApp',[])
.controller('firstController',function($scope){
$scope.date=new Date();
$scope.count=0; setInterval(function(){
$scope.$apply(function(){
$scope.date=new Date();
$scope.count++;
});
},1000); }); </script>
</body>
</html>

第二种

var myApp = angular.module("myApp",[]);
myApp.controller("mainController", function ($scope) {
$.get("/articlelist",{},function(data){
$scope.data=data;
});
$scope.updatedate = function(id,age){
$.get("/update",{id:id,age:age},function(data){
item.age=age;//这里你会发现值变了,但页面没刷新
$scope.$apply();//需要手动刷新
console.log(item);
});
}
});

  

angularJS $scope的$apply方法实现model刷新的更多相关文章

  1. angularjs $scope.$apply 方法详解

    myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...

  2. angularJS之$apply()方法

    这几天,根据buddy指定的任务,要分享一点angular JS的东西.对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不 ...

  3. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  4. [转]angular之$apply()方法

    这几天,根据buddy指定的任务,要分享一点angular JS的东西.对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不 ...

  5. $apply方法的作用

    $apply方法是用来触发脏检查,它在控制器里监听一个变量,每当这个变量的值改变的时候,它会去与最初的值做一次比较,然后HTML页面就会及时更新该变量的值(将最新的值赋值到html页面的view层或M ...

  6. angularJS之$watch、$digest和$apply方法

    最近项目上使用了比较多的angular JS,一直都对它感觉比较陌生,总觉得有点反直觉,这段时间,准备下定决心弄明白,这个框架到底是怎么一回事,以及它的工作原理,生命周期……一点一点的啃完它吧.首先, ...

  7. 深入了解angularjs中的$digest与$apply方法,从区别聊到使用优化

     壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...

  8. 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]

    转载自:http://gxxsite.com/content/view/id/132.html 在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore ...

  9. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

随机推荐

  1. C/C++程序员应聘常见面试题深入剖析(1)

    摘自:http://blog.csdn.net/zhoudengqing 1.引言 本文的写作目的并不在于提供C/C++程序员求职面试指导,而旨在从技术上分析面试题的内涵.文中的大多数面试题来自各大论 ...

  2. 19/03/04 vue基础整理,webpack基础整理

    gitUrl : https://gitee.com/jinyujiang/vue_basis_example.git (迭代更新) webpack : 有道云笔记分享  以及码云(迭代更新)

  3. Android 坑爹问题

    A/art: art/runtime/jdwp/jdwp_event.cc:] Check failed: Thread::Current() != GetDebugThread() (Thread: ...

  4. MAC无法确认开发者身份

    网上下载的软件,如果来自身份不明的开发者,在MAC上打开时会提示无法确认开发者的身份,在网上找到了一篇尝试解决的文章,文章链接地址为http://jingyan.baidu.com/article/f ...

  5. 为 Azure 应用服务配置连续部署工作流

    本快速入门介绍了如何将应用服务 GitHub 集成以实现连续部署工作流.在本教程中完成的所有操作均符合1元试用条件. 本快速入门介绍了如何将应用服务 GitHub 集成以实现连续部署工作流.在本教程中 ...

  6. 安装 Azure CLI

    首先安装node 和 npm 的安装 官方推荐v4.4.4长期支持版 1.下载并解压 node-v4.4.4-linux-x64.tar.xz tar -xJf node-v4.4.4-linux-x ...

  7. (转)linux自动备份oracle数据库并上传到备份服务器 脚本实现

    实际项目中,备份数据是不可缺少的一步,完成数据的自动备份减少个人的工作量,是我们的目标.之前很少写过脚本,不过这些简单的操作还是可以做到的!话不多说,开始具体介绍:oracle版本:10.2.0操作系 ...

  8. UVA 247 - Calling Circles (Floyd)

    互相可以打电话是一个传递关系,所以Floyd求传递封包,dfs找一个尽量大的圈. #include<bits/stdc++.h> using namespace std; ; map< ...

  9. Luogu P5349 幂

    大力数学题,发现自己好久没写多项式水平急速下降,求逆都要写挂233 首先看到关于多项式的等比数列求和,我们容易想到先求出每一项的系数然后最后累加起来即可,即设\(f_i=\sum_{n=0}^{\in ...

  10. WPF知识点全攻略08- 依赖属性

    依赖属性是WPF不得不提,不得不会系列又一 先来看一下,自定义依赖属性的写法 public static readonly DependencyProperty IconProperty = Depe ...