AngularJS 的安全Apply

$scope.safeApply = function(fn) {
    var phase = this.$root.$$phase;
    if (phase == ‘$apply‘ || phase == ‘$digest‘) {
        if (fn && (typeof(fn) === ‘function‘)) {
            fn();
        }
    } else {
        this.$apply(fn);
    }
};

使用NG的时候会遇到动态添加数据的情况,有可能在你动态添加数据后页面因为渲染已经完成了导致新添加的数据在页面中无法展示

如使用select标签:

<select id="uidSelect" class="sel" ng-model="sid" ng-init="" ng-options="user.name for user in users">
  <option value="" default>-Select one-</option>
</select>

因为开始的时候users数组的数据是固定的浏览器渲染出来后值就是固定的,那么如果在这之后我们想往users里面添加数据这个下拉选项是不会有改变的,这时候度娘上的各种攻略会告诉你加上 $scope.$apply() 就可以了...但是加好以后有可能会出现 [$rootScope:inprog] $apply already in progress 这样的错误信息,那么这时候只需要使用最上面提供的方法就可以了,

先把最上面的 safeApply 方法加入你的 scope 里面,然后动态添加完数据后 使用 $scope.safeApply(); 就可以了....

时间: 2024-12-25 23:27:27

AngularJS 的安全Apply的相关文章

angularJS $watch $digest $apply

一 简介AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式.数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自动地反馈到scope的数据上,也即意味着scope模型会自动地更新.类似地,当scope模型发生变化时,view中的数据也会更新到最新的值.那么AngularJS是如何做到这一点的呢?当你写下表达式如{{ aModel }}时,AngularJS在幕后会为你在scope模型上设置一个w

angularJS中的$apply(),$digest(),$watch()

$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的. $apply()和$digest() AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式.数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自动地反馈到scope的数据上,也即意味着scope模

angularJS报错$apply already in progress的原因和解决方法

如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和解决的问题,否则就没有必要出现在日志中了. 原因是:angularjs框架本身已经在做脏数据检测了,我们没有必要再手动调用$apply或者$digest.这里自然而然出现了一个疑问:什么时候需要我们手动调用$apply或者$digest,什么时候不需要呢?先列出

angularJS学习小结——$apply方法和$watch方法

引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了 解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些angularJS中Scope 提供$apply 方法传播 Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQuery UI 空间等)调用了AngularJS 函数之后,必 须调用$apply.在这种情况下,你需要命令

[转载]AngularJS and scope.$apply

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html http://www.cnblogs.com/zhrj000/p/3383898.html If you’ve written a non-trivial amount of code in AngularJS, you may have come across the $scope.$apply() method. On the surface, it may seem like

angularJs的$scope.$apply

<!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script&g

通俗理解angularjs中的$apply,$digest,$watch

<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>angular时钟辅助理解$apply,$digest,$watch</title> <link rel="stylesheet" href="../bootstrap.

AngularJS实现原理

个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析.     首先上一小段代码(index.html),结合代码我们来看看,angular一步一步都做了些什么. <!doctype html> <html ng-app> <head> <script src="angular.js"><

angularjs工作原理解析

个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析.     首先上一小段代码(index.html),结合代码我们来看看,angular一步一步都做了些什么. <!doctype html> <html ng-app> <head> <script src="angular.js"><