AngularJS实例教程（一）——数据绑定与监控 about blog HOT 50 OPEN

明天晚上在苏宁大学课堂上面讲

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.

昨天讲的过程中，有同事提出这么一些问题，记录一下：

1. 与GWT这类技术的对比是怎样的？
   回答：GWT的界面层是用Java代码来写，写的效率并不如HTML这个体系高，跟Angular相比，开发效率也还是低一个档次，而且如果有精通CSS的人员，无法有效参与项目进行改进。但我并不反对它的编译过程，大型项目要使得源码可控，经过一个工程转换是可以接受的。
2. 它的使用状况如何？
   回答：在这里，我让大家猜测了一下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.