angularJs中修改controller后的数据没有重新渲染页面_reesegz的博客-CSDN博客
angularJs中修改controller后的数据没有重新渲染页面
reesegz
于 2017-12-10 14:55:50 发布
5972
收藏
分类专栏：
Angular
文章标签：
angularjs
前端
Angular
专栏收录该内容
1 篇文章
0 订阅
订阅专栏
场景重现
在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。
原因分析
AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(model)的改变都会反映到视图中。但是，如果我们更改一个不在AngularJS执行上下文中的数据模型(model)，就需要人为的调用$apply()来提醒AngularJS数据发生变化了。就像是要告诉AngularJS，我们改变了一些数据，他应该启用监听器以便于让我们所做的改变能够反映出来。例如，当使用Javascript的setTimeout()函数来更新一个数据模型的时候，AngularJS就没办法知道你改变了数据模型。这种情况下，调用$apply()来触发$digest循环就是你的责任了。类似的，如果你写了一个指令，这个指令是设置了一个DOM事件监听器，更改数据模型的代码在事件处理函数里，那么，也需要调用$apply()来保证更改能够反映出来。
案例重现
[html]
view plain
copy
<body ng-app="myApp"> <div ng-controller="MessageController"> Delayed Message: {{message}} </div> </body> /* 没有$apply()会发生什么 */ angular.module('myApp', []).controller('MessageController', function ( $scope ) { $scope.getMessage = function () { setTimeout(function () { $scope.message = 'Fetched after 3 seconds'; console.log('message:'+$scope.message); }, 2000); }; $scope.getMessage(); });
通过运行这个例子，我们会发现，在两秒之后，函数开始执行，并且更新数据模型。但是，视图却没有更新。原因我们也应该猜到了，我们忘了调用$apply()。
因此，我们需要像下面这样来写我们的getMessage()函数。
[html]
view plain
copy
angular.module('myApp', []).controller('MessageController', function ( $scope ) { $scope.getMessage = function () { setTimeout(function () { $scope.$apply(function () { //wrapped this within $apply $scope.message = 'Fetched after 3 seconds'; console.log('message:' + $scope.message); }); }, 2000); }; $scope.getMessage(); });
运行更新后的例子，两秒之后，我们就能够看到视图更新了。我们所做的唯一的改变就是将代码放进了$scope.$apply()中。这样，就能自动的去调用$rootScope.$digest()，然后，监听器就会启动，视图就会更新了。
reesegz
关注
关注
点赞
收藏
评论
angularJs中修改controller后的数据没有重新渲染页面
1.场景重现在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。2.原因分析AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(
复制链接
扫一扫
专栏目录
解决angular2 获取到的数据无法实时更新的问题
10-18
今天小编就为大家分享一篇解决angular2 获取到的数据无法实时更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
angularjs $scope.变量更新了，页面绑定的没有更新
ch953181172的博客
12-12
2812
有可能的问题1：
controller 的元素没有包含绑定的$scope的元素进来
参与评论
您还未登录，请先
登录
后发表或查看评论
JavaScript渲染页面的方法
最新发布
dyk11111的博客
10-20
777
比方说，我们现在写一句 “学js真是一件开心的事” 渲染到页面，可以复制代码，自己运行一下。JS 中的输出语句，该语句会将内容输出到页面上，并且能够解析标签元素。JS 中的警告弹框，该语句会将内容以弹窗的形式提示用户。改变元素的内容（包含内部标签）可识别标签。3.元素.innerHTML = 内容。
angular 强制更新视图_angularjs：强制重新渲染/完全刷新指令模板
weixin_39883906的博客
12-30
482
This is a rewriting because of the off-topic issue:I wrote a directive for a dropdown. I am using the directive two times as kind of a workflow. the first dropdown triggers by change action the refres...
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法
热门推荐
前端一线搬运工的博客
04-02
4万+
1. 在redux中修改state页面未更新
解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state
原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页...
解决AngularJS中ng-repeat不更新视图的问题
kydkong的博客
07-26
8141
AngularJS中ng-repeat不更新视图的问题的可能解决方案
vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变
weixin_44011751的博客
04-02
903
vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变的解决方案
angularjs在js代码中改变了model的值，但是页面上没有变化
VITAMIN的博客
07-25
6998
1.场景重现
在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。
2.原因分析
AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(model)
vue中数据改变，视图不更新的原因以及解决方法（强制更新视图）
小太阳的博客
03-16
7961
我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：
1.数组数据改变时，使用某些方法操作数组，数据变了，但是视图并没改变。（页面没有监测到数据改变）
解决办法：
使用下面这些方法操作数组，其数据会被vue监测
push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。
替换数组：
例如filter()、concat()和slice(),这些不会改变原始数组，但是会返回一个新数组。可以用新数组替代原数组。你可能认为这将
数据值改变了，但是页面没有变化
stm870581942的博客
05-11
995
使用this.$set方法
this.$set(obj, key, value)
this.$set(数据对象, 添加的数据名称, 添加的数据值)
链接: https://blog.csdn.net/hhkongbai/article/details/101022019.
v-model绑定值改变，界面不更新问题解决方法
asunny_的博客
03-04
4305
v-model绑定值改变，界面不更新问题解决方法
原因：Vue在初始化实例的时候会对属性执行getter/setter转化，所以只有在data中声明了的对象属性v-model的双向数据绑定才会有效
// 实例化一个Vue对象，data中object.a 是双向绑定的
var vm = new Vue({
data: {
object: {
a: '1'
})
// 假如html中v-model="object.b"
// 在js中进行如下赋值，
this.object.b = '
angularjs 让当前路由重新加载_如何使用AngularJS重新加载或重新渲染整个页面
weixin_39861882的博客
12-20
146
在根据几个用户上下文渲染了整个页面并发出了几个$http请求之后，我希望用户能够切换上下文并再次重新渲染所有内容(重新发送所有$http请求等)。如果我只是将用户重定向到其他地方，则一切正常：$scope.on_impersonate_success = function(response) {//$window.location.reload(); // This cancels any cur...
angularJs中ngModel的坑
weixin_30486037的博客
05-14
211
angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧，由于各种业务的需求，我们经常需要去写一些继承ngModel的指令，来满足各种奇葩需求，最多的莫过于表单的验证啦，另外你在封装一些jquery插件的时候，也是需要继承ngModel的，最典型的莫过于 datepicker、fileUpload等等。
但是ngModel本身其实有很多坑，在这里分享给大家，如果大家又遇到...
如何使用AngularJS重新加载或重新呈现整个页面
xfxf996的博客
07-15
1776
After rendering the entire page based on several user contexts and having made several $http reques
angularjs数据模型值被改变,页面不刷新的解决办法
木灵的专栏
03-27
8402
在debug的时候发现privitedevices的值有变化，但是页面并没有刷新，这时需要手动刷新下，然后就ok了$scope.devices = privitedevices
$scope.$apply();//需要手动刷新
angularjs 从外部改变controller内的数据
weixin_33717117的博客
09-08
166
var appElement = document.querySelector('[ng-controller=seatsCtrl]');var $scope = angular.element(appElement).scope();$scope.$apply(function () { $scope.data = [ { id: 1, cnt: 4 }...
AngularJS修改model值时，显示内容不变
lj2tj的专栏
11-07
2931
一段很简单的AngularJs代码：
{{name}}
网页上回显示一个文本框，输入值，文本框下面会显示所输入的内容。
简单修改一下代码：
{{name}}
这次当输入内容时，不会显示输入信息了，同时AngularJs表达式也不能被解释了。
感觉是因为Angular默认不存在myApp的对象，所以angular找不到对应的应用程序
angularjs模型数据改变页面未刷新的解决办法
weixin_38586700的博客
11-15
751
angularjs模型数据改变页面未刷新的解决办法
在angularjs开发过程中我们发现有时模型数据改变了页面却没有变化，这是因为使用原生Js或者jQuery对模型数据做出更改时，angularjs不能监测到数据的改变，解决办法是
使用angularjs的方法，例如把$.get()改成$http.get()。
使用$scope.apply()手动刷新。
点击带有ng-click指令的按钮时，...
AngularJS修改model值时,显示内容不变的实例
01-19
一段很简单的AngularJs代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
[removed][removed]
</head>
<body ng-app=>
<input type=text ng-model=name><br>
<span>{{name}}</span>
</body>
</html>
网页上回显示一个文本框，输入值，文本框下面会显示所输入的内容。
理解Angular中的$digest()和$apply()
Erichain
02-23
491
翻译自http://www.sitepoint.com/understanding-angulars-apply-digest/$digest()和$apply()是AngularJS中的两个核心并且有时候容易引人误解的部分。我们需要深入理解这两者是如何运作的，从而才能理解AngularJS本身是如何运作的。本文的目的就是为了和你解释，在你的日复一日使用AngularJS编写代码的过程中，$dige
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
reesegz
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
原创
59万+
周排名
64万+
总排名
1万+
访问
等级
199
积分
粉丝
获赞
评论
收藏
私信
关注
热门文章
Javascript中事件对象event和e
6255
angularJs中修改controller后的数据没有重新渲染页面
5972
github的仓库中找不到settings按钮，无法删除仓库
5290
分类专栏
Angular
1篇
JS
1篇
前端开发工具
工具类
1篇
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
github的仓库中找不到settings按钮，无法删除仓库
Javascript中事件对象event和e
2018年1篇
2017年2篇
目录
目录
分类专栏
Angular
1篇
JS
1篇
前端开发工具
工具类
1篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值