angularjs 之$apply()【集成自他人】
angularjs 之$apply()【集成自他人】
安吉拉 发表于4个月前
angularjs 之$apply()【集成自他人】
  • 发表于 4个月前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

angularjs的双向数据绑定很强大,但并非所有时候都起作用。

双向数据绑定其实就是当模型发生变化的时候重绘DOM,使看到的数据更新,模型发生变化。

1.DOM事件  

2.xhr响应触发回调

3.浏览器地址发生变化

4。计时器触发回调

以上某一种情况的发生都会触发模型监控机制,同时调用$apply()方法重绘DOM。通常情况下我们使用的一些指令服务会自动触发$apply()的调用,比如$http $location $timeout。还有视图中的指令也可调用,所有ng-[event]指令(ng-click ng-keypress)都会内部调用

但是有些时候是不会调用的。

1,在回调函数里执行的方法不会触发

此时需要手动调$scope方法,使dom重绘。

function b(){

//方法1

$scope.b='b';

$scope.$apply();

//方法2

/**$scope.$apply(function(){

  $scope.b='b';

})**/

}

2,在使用第三方库的时候

我们使用第三方框架比如(jquery),或者调用setTimeout()都可以使用$apply()函数让angular返回一个$digest循环

当我们将jQuery和Angular集成在一起时(这通常被视为一个肮脏的行为),就需要使用$apply(),因为Angular不会察觉到执行在Angular上下文外部的事件。例如,在使用jQuery插件时(比如datepicker),就需要使用$apply()将来自jQuery的值传递到Angular应用中

在这里,我们构建了一个简单的指令(第10章深入探索了如何构建指令),指令中我们在元素上使用了datepicker这个jQuery插件方法。

datepicker插件暴露了一个onSelect事件,这个事件会在用户选择日期时触发。为了在Angular应用内部获取用户选择的日期,我们需要在$apply()函数内运行datepicker的回调函数

标签: $apply()
共有 人打赏支持
粉丝 2
博文 30
码字总数 7446
评论 (0)
×
安吉拉
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: