Comments (50)
明天晚上在苏宁大学课堂上面讲
from blog.
@iamwucheng 因为ng-click内部帮你调用了一下。凡是数据想要更新到界面上,都必须通过$digest或者$apply,内置的一些东西不需要自己调用,是因为它们内部帮你调了,自己在指令里用原生事件操作的东西,需要手动调用。
from blog.
飞哥真高产
from blog.
赞~
from blog.
好
from blog.
赞
from blog.
对angularjs的双向绑定有了重新认识。但是如果监控的变量非常多,对应用的性能影响是不是很大。
from blog.
飞哥真高产
from blog.
苏宁的非前端部门的兄弟们,欢迎加入我们前端协会,每周四晚上都有内部分享,不定期有面向所有体系的公开分享。
from blog.
最近再看 ng,前来学习
from blog.
mark一下,上班路上看。
from blog.
@xufei 大神可以来一篇详细介绍$digest的博文吗?,期待哦。 @liminjun 对某些使用一次的,可以试试{{ ::variable }}
from blog.
很详细,非常感谢。
from blog.
象棋单位的模块继承蛮巧的赞
from blog.
@yibuyisheng 这个系列的后面会讲。之前我翻译的这篇你看过吗?
https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md
from blog.
@soulteary 哪里巧了。。。04年写的那个就是这么写的,这部分基本无改变
from blog.
昨天讲的过程中,有同事提出这么一些问题,记录一下:
- 与GWT这类技术的对比是怎样的?
回答:GWT的界面层是用Java代码来写,写的效率并不如HTML这个体系高,跟Angular相比,开发效率也还是低一个档次,而且如果有精通CSS的人员,无法有效参与项目进行改进。但我并不反对它的编译过程,大型项目要使得源码可控,经过一个工程转换是可以接受的。 - 它的使用状况如何?
回答:在这里,我让大家猜测了一下Google内部使用Angular的项目数量,有猜几个的,几十的,几百的,其实是有1600多,这个数据在另外一篇翻译的文章中有提到。猜得最接近的得到了一本书。
此外,还让大家猜测了一下文中那个综合业务实例的JS代码行数,猜得最接近的也得到了一本书。
from blog.
@xufei 不好意思,之前没看过,现在正在阅读,写的很给力,很详细
from blog.
在angular源码中有这么一段注释:
The `$evalAsync` makes no guarantees as to when the `expression` will be executed, only that:
- it will execute after the function that scheduled the evaluation (preferably before DOM rendering).
- at least one {@link ng.$rootScope.Scope#$digest $digest cycle} will be performed after `expression` execution.
个人感觉要不要在《构建自己的AngularJS,第一部分:Scope和Digest》中强调第二点。因为我之前不理解$evalSync,导致经常出现“$digest已经在执行”的异常,我想$evalSync能解决我的问题(根据注释第二点)。在《构建自己的AngularJS,第一部分:Scope和Digest》这篇文章中,个人感觉这块叙述的不是太清晰。
from blog.
@xufei 我觉得棋子属性抽象蛮赞的,给我做的话,估计偷懒就绑定两个对象到作用域顶级对象上了...
from blog.
赞!
from blog.
@yibuyisheng 你的大部分问题应该可以简单粗暴地使用:
$timeout(function() {
//aaa
//$scope.$digest();
}, 0);
来实现。
from blog.
通熟易懂, 👍
再读一遍~
from blog.
@xufei 谢谢您的指导。根据您的指导,结合angular源码,基本理解了digest机制,这下应该不会再使用网上的那个"safeApply"了。
from blog.
@yibuyisheng safeApply
是反模式,官方wiki明确指出了。
而apply
一般也用不到,只有在Directive
里面。 如果遇到交错的地方用$timeout(fn, 0)
from blog.
@atian25 目前个人认为可以不用$timeout,我的理解是:
digest过程中并没有机会执行非digest代码(即event loop不会切换到其他js代码片段上面去),但是有这种情况:controller的构造函数被放置在了asyncQueue当中,这就直接导致了在这个函数执行的时候,就会是已经处于digest(即beginPhase已经被调用过)过程中的状态,所以如果在这个函数里面直接调用$digest方法,肯定就抛出“digest in progress”的异常了,但是在这个函数中通过$timeout间接地调用digest方法,也是不会抛异常的(个人认为这样干实在不优雅)。
我猜测肯定还有其他类似于controller构造函数的函数,这个等待后续研究。这就是我目前认为的主要原因。
理解有误的地方,还望大牛们指正,谢谢
from blog.
我的意思是,理解digest
后,就几乎不会遇到digest in progress
的报错了。
但某些情况下,一个方法可能会被内部和外部调用, 这时候$timeout
就很有用了。
$timeout
就是简单的丢到下一个digest
去, 所以@xufei 说简单粗暴很有效。
from blog.
@atian25 嗯,关键还是要理解digest原理,至于用什么解决方案,随自己喜好。谢谢你的耐心回复
from blog.
截图的代码里边点击Add book2和AddItem, 页面上面ng-repeat迭代的数据都会自动更新(双向绑定自动更新很合理嘛),但是Add book按钮通过指令的方式调用service更改数据后同样在controller里面对$scope的books进行了更改,页面上的数据却没自动更新, 必须手动调用apply方法才能达到预期更新的效果
困扰好久,求指导哇 :(
from blog.
@xufei 谢谢, 运行demo对比的时候有这样的猜想,但是找源码里面想找ng-click执行的过程相关的代码进行验证的时候就是找不到,在publishExternalAPI的方法里面并没有找到添加ng-click的逻辑(个人觉得应该会在添加指令的地方至少有,ng-click很显然应该是个指令)
颇傻, 补充一点东西:
看着“ngAttributeAliasDirectives‘, ”ngEventDirectives“这两个指令有点很奇怪的感觉, 顺着找了一下, 没错的话应该是第二个吧?(截图里面的哪一段)
貌似还用到了自带的解析器?
from blog.
@iamwucheng https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js 这里统一处理了事件的指令
from blog.
@dolymood 嗯, 看到了,谢谢, 最近的版本里面逻辑还变了点
from blog.
@xufei @dolymood
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
这篇文章将的挺透彻的
from blog.
@iamwucheng 看我这篇也可以:#10
from blog.
@xufei 赞ヾ(´∀`)ノ
from blog.
学习了,点赞!!!!!!!!!!!!
from blog.
👏 👍
from blog.
6得不行,赞一个!
from blog.
您好,请教一下,那个综合例子中,民族(editingEmployee.minority)是如何通过这个值,转化成汉族或者(editingEmployee.nation),我是在controller中增加format方法来完成的,我并没有在您的employee.js中看到有任何format方法,是有其他更简洁方法吗?
from blog.
@aicekiller 没有使用minority做显示的转换,这里只是用它来做了radio的选中和输入框的显示隐藏,真正的值在nation里,真实用的话,是需要做个format的,不然提交的时候不好办。
from blog.
@xufei 谢谢
from blog.
请教一个问题:
<div ng-app="myApp" ng-controller="myCtrl">
<ul class="list-group">
<li class="list-group-item" ng-repeat="(id,x) in names" ng-click="item=li(id);selected.id=id">
{{x.name}}
</li>
<div>{{selected.id}}</div>
<div>{{item}}</div>
<div>{{str}}</div>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [{
name: 'a'
}, {
name: 'b'
}, {
name: 'c'
}];
$scope.selected = {
id: 0
};
$scope.item = 0;
$scope.li = function(n) {
$scope.item = n
};
});
</script>
请问上面这段代码我在li的ng-click事件中直接用item=id赋值的话为什么item值不会改变?用controller里面定义的li()方法赋值后就能获取到,或者对controller里面定义的selected对象赋值也能获取到,这是什么原因?谢谢
from blog.
@manolitowang 隐约记得 ng-click 会创建一个local scope。
from blog.
@yibuyisheng 谢谢,你是对的,我看到了相关的介绍
from blog.
@yibuyisheng @manolitowang ng-click并不会创建一个新作用域。。。这里出现这个问题是因为ng-repeat创建了一个继承作用域,且里面是写操作所以不会更新外部的item
from blog.
@kuitos 噢,记得错了。刚看了源码,对于 ngClick 只是注入了一个 local 对象:https://github.com/angular/angular.js/blob/a4e60cb6970d8b6fa9e0af4b9f881ee3ba7fdc99/src/ng/directive/ngEventDirs.js#L64 ,并没有创建新 scope 。
from blog.
写得真好!冒泡排序的实现貌似有点问题,似乎应该把i和j提出sort外,否则每次运行sort都需要从头开始排序,提出去后多个sort之间能保留上一次的状态。
from blog.
非常感谢你,这篇教程写的真棒!
from blog.
看了ng-repeat的源码,想问一下您为什么在遍历collection的时候缺省使用'valueType: value'作为索引,这点我不是特别理解,求指点一下,谢谢。 @xufei
from blog.
看完菜鸟的教程,然后刷完大漠老师的视频,然后再看这些内容。哇,这种感觉太爽了
from blog.
Related Issues (20)
- Angular的变革 HOT 11
- 十年来感受的前端技术变化 HOT 87
- Angular 1.x和ES6的结合 HOT 11
- 关于新框架的学习 HOT 17
- 如何增强单页应用的体验 HOT 24
- 数据的关联计算 HOT 25
- 对当前单页应用的技术栈思考 HOT 12
- 流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑 HOT 18
- 探秘 vue-rx 2.0 HOT 4
- 复杂单页应用的数据层设计 HOT 10
- RxJS 入门指引和初步应用 HOT 13
- 单页应用的数据流方案探索 HOT 38
- 组件化 or 分层 HOT 5
- 从前端角度看企业软件的研发过程 HOT 5
- 交互的本源 —— 对渐进式交互优化路径的初步探索 HOT 1
- 对 aPaaS 的产品认知
- 浅谈低代码平台涉及的一些技术选型 HOT 4
- 语义化表达 —— 构建类型优先的交互体系
- 建立元数据驱动的前端架构 HOT 1
- 业务中的组件化体系 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.