AngularJs实现聊天列表实时刷新功能_AngularJS_脚本之家

昨天在做app的聊天列表时,遇到了一个问题,消息监听器监听到了一个新的消息,但是如果这时已经处于消息列表的页面那么消息列表并不会及时更新。

已经用angular开发了大概有三个月了,开始两周很艰难,慢慢的也渐渐熟悉一些了。在此整理一下这段时间遇到的各种坑。

我的想法是在service层中的监听器方法里,当监听到了一个新的消息,那么就在根作用域中发出一个广播,告诉controller层需要去获取最新的消息列表了。

一、Angular怎样停止请求

(1)首先在需要请求的controller中注入$q服务,

(2)在scope变量中声明一个变量,var canceler;

(3)在事件最上方写上

//取消之前的请求
if (canceler) canceler.resolve();
canceler = $q.defer();

(4)在请求的位置添加一个延时

$http.jsonp(drivingUrl,{
    timeout:canceler.promise 
}).success(response);

www.hj8828.com,service层中发出广播:

 二、ng-repeat的渲染问题

业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写。在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以通过判断$last的值来监听ng-repeat的执行状态,可以自定义指令

//ng-repeat-finish //解决ng-repeat时间有一个渲染时间,加载延迟问题
routerApp.directive("ngRepeatFinish", function() {
    return {
        restrict: "A",
        scope: {},        
        link: function($scope, element, attr){
            if($scope.$parent.$last){
                //要处理的函数
            }
        }
    }

});

参考博客

controller层中接听广播:

 三、Directive指令中的scope(摘自)

AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{};默认情况下是false

rootScope是所有scope的父级

1.scope = false

我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

它的广播 可以在无交集的controller间使用

2.scope = true

我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。

scope 的 broadcast 和 on 是用于作用域有交集controller间事件传递
有别于rootScope

3.scope = {}

当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。

以上所述是小编给大家介绍的AngularJs实现聊天列表实时刷新功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 

我们使用了隔离的作用域,不代表我们不可以使用父作用域的属性和方法。

 

  1. 我们可以通过向scope{}中传入特殊的前缀标识符(即prefix),来进行数据的绑定。
  2. 在创建了隔离的作用域,我们可以通过@,&,=引用应用指令的元素的属性,如上面的代码那样,我们可以在<div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>这个元素中,利用前缀标识符通过使用属性my-name,age,change-my-age来引用这些属性的值。

 

下面我们来看看如何使用这些前缀标识符:

 

@

 

这是一个单项绑定的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive my-name="{{name}}"></div>,注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。