angularjs 如何实现数据自动刷新?

Jailyn
  • 233

想实现页面的数据改变了(就是说我提交了数据到后台),想自动刷新一下数据,渲染在页面上了,只是数据刷新,怎么弄??急呀.....

回复
阅读 17.5k
11 个回答

angularjs的数据应该是双向绑定的,把前端视图对应的model里的数据更新到最新就可以了。

你具体遇到了什么情况


上传图片的情况

$scope.imgUrl = null;

someAjaxReturnPromise()
  .then(resp => {
    // ... do something
    $scope.imgUrl = resp.imgUrl;
  })
<div ng-if="imgUrl">
  <img ng-src="{{imgUrl}}">
</div>

要么前端轮询,要么部署个长连接服务器或者推送?

gunter
  • 2
新手上路,请多包涵

前端ajax提交成功 就重新取数据或者更新数据就好了 angular是双向绑定 页面上的数据也会改变的啊

事件监听:实现从Model到DOM的更新

分两种情况:

  1. 前端触发的改变,因为angular是双向绑定的,一般来说$digest循环会自动刷新数据。

  2. 如果是服务器数据改变不是由前端触发的,那么可以通过两种方法来实现前后端数据同步:

    • 轮询,通过$interval注册一个函数,每隔一秒就去服务器拿一次数据,然后刷新前端。

    • websocket,使用websocket进行双工通信,比如采用socket.io这个库就可以实现。

用$watch监测

看了你的几个问题,还是不了解angualr。问题应该是出在你的数据显示上,而不是刷新的问题。从你的tag就看出来了,用angular的话jQuery是不需要的。
你的数据显示要使用angular的方式,单一数据如 <span>{{demoText}}</span>,数组如<ul><li ng-repeat="item in yourRows">{{item.name}}</li></ul>
在这个前提下,当$scope.demoText或者$scope.yourRows的值发生变化时,显示的数据自然同步变化,根本不存在你想象的刷新问题。
亲,不要拿angualr当作jquery来用哦。

这不就是再调一下获取数据的接口然后赋值给对应的model就行了吗。。。angular会帮你做重新渲染的事情的,不需要自己来做,你要做的事情就是更新模型的值

angularjs是数据驱动类型的框架,如果数据发生改变了(没有特殊处理的情况下),页面是自动刷新的。不是特别理解你这个刷新是什么需求,给你列举几种。
前提:显示页面 -> 编辑页面(表单页面)
1,页面表单更改了,把数据提交到后台,后台返回的是成功或者失败的状态来表示数据保存成功与否。这个需求,是不需要手动刷新页面,页面会根据数据的变化自动改变。如果接收到了成功的状态,直接返回显示数据的页面就可以了,如果失败,则在当前页面不动,做异常处理。
2,提交表单到后台,后台会根据表单的数据做相应的操作,这样显示页面的数据可能会改变。如果此时返回显示页面,需要重新请求服务端,数据回来会自动刷新页面。
3,用了angular以外的框架或者方法获取数据,需要手动刷新才行。angular封装了ajax,就是$http和$q模块。如果用了其他的方法,angular可能监测不到数据的变化,需要在获得数据之后用$apply方法来手动刷新。比如:

$.get(api,function(response){//用jq获取数据
    $scope.data = response;//此处angular可能监听不到$scope.data的变化
    $scope.$apply();//用$apply来强制刷新数据
})

如果是想在向后台提交请求后实时动态的在页面展示后台返回的数据的话就可以在请求后台成功的函数里请求你想展示的数据,然后绑定对应的modal就可以了.

宣传栏