原创:Angular新手容易碰到的坑,随时更新,欢迎订阅 - 雪狼·IT

标签: 原创 angular 更新 | 发表时间:2014-04-23 19:21 | 作者:雪狼·IT
出处:

在Angular群里回答新手问题一段时间了,有一些Angular方面的坑留在这里备查,希望能对各位有所帮助。这个文章将来会随时更新,不会单独开新章,欢迎各位订阅。

Q1. <div ng-include="views/user/show.html"></div> 错在哪里?

A1. 如果你这么写过,会发现这个位置啥也没有加载出来,那么,错在哪里呢?错在ng-include需要的是一个变量,如果你在$scope中有这样一个变量 $scope.userShowTemplateUrl = "views/users/show.html",并且把上面这句变为<div ng-include="userShowTemplateUrl"></div>就能正常工作了。或者这样写也行:<div ng-include=" 'views/user/show.html' "></div>

原因何在?

因为在ng-include中,是把它的参数当做变量来解释的,它会通过$eval对传入的值进行计算,然后作为模板地址去加载。

不过,更好的方法是把这些界面片段(partical)写成指令,那样你就不用在多处重复写路径了,更重要的是,将来你可以直接在这里扩展它的交互逻辑,从界面原型平滑的演化到线上系统。

Q2. 我的指令怎么无效?

A1. 如果你排除了代码错误等问题,那么最可能得原因是restrict。restrict参数是用来规定你可以通过哪种方式来使用指令,而这个问题之所以容易成为坑,是因为restrict的默认值是A,也就是说,默认情况下,指令只能通过属性的形式使用,比如我写了一个指令叫做appHeader,那么默认情况下我只能用这样的形式使用它:<div app-header></div>,而<app-header></app-header>的形式则是无效的。

所以,如果你用返回函数的形式使用指令,那么你就只能使用属性的方式调用它,比如:

yourModule.directive('appHeader', function() {
return function(scope, element, attrs) {
element.text('hello');
}
});

如果要使用元素的方式使用指令,那么你就要这样写:

yourModule.directive('appHeader', function() {
return {
restrict: 'E', // 或'EA'等都可以,几种形式可以任意组合
link: function(scope, element, attrs) {
element.text('hello');
}
}
});

Q3. 修改了变量怎么界面没反应?

A3. 首先你当然要检查有没有错误以及是否确实是scope变量,如果这些都没问题,那么多半儿是$apply导致的。对于大多数操作,$apply都会自动执行,所以你不用担心,但是如果你使用了angular之外的功能,比如直接调用了setTimeout函数,挂接了jquery的事件等等,那么系统就没有机会帮你调用$apply,界面也就没有机会刷新了,但是你如果之后又做了其他会导致$apply的操作,你会发现以前“欠下”的那次界面刷新被正常执行了了 …… 迟到了的刷新仍然是bug。

典型代码如下:

setTimeout(function() {
$scope.time = new Date()
}, 1000);

这种情况下你在页面中绑定的time变量将不会被自动刷新,无论是通过{{}}表达式,还是通过ng-*属性或者其他任何形式。怎么改呢?这样:

setTimeout(function() {
$scope.$apply(function() {
$scope.time = new Date();
});
}, 1000);

不过,这不是最好的形式,最好的形式是什么呢?当然是使用angular内置的$timeout服务,它就是干这个的:

$timeout(function() {
$scope.time = new Date();
});

没有$apply,却正常工作,没bug,而且漂亮多了吧?不过这里别忘了你得把$timeout服务进行依赖注入,不然它是undefined。

Q4. ng-click 写成 ng-class 导致的界面停止响应

A4. 这是我自己犯过的一个低级错误,属于深度依赖ide导致的问题。ide的自动代码提示功能,ng-cl的第一个候选项是ng-class,如果偷懒少打了一个字,那么本来想写ng-click的代码就会写成ng-class,结果就是,无休止的重新计算ng-class中的表达式,其中的原因还没来得及看源码研究。

如果遇到界面停止响应的问题,而且你也同样深度依赖ide,那么,从这个角度查查看吧。


本文链接: 原创:Angular新手容易碰到的坑,随时更新,欢迎订阅,转载请注明。

相关 [原创 angular 更新] 推荐:

原创:Angular新手容易碰到的坑,随时更新,欢迎订阅 - 雪狼·IT

- - 博客园_首页
在Angular群里回答新手问题一段时间了,有一些Angular方面的坑留在这里备查,希望能对各位有所帮助. 这个文章将来会随时更新,不会单独开新章,欢迎各位订阅.
错在哪里. 如果你这么写过,会发现这个位置啥也没有加载出来,那么,错在哪里呢.

浅析angular

- - JavaScript - Web前端 - ITeye博客
  这两天又把angular翻阅了一遍,感叹一下现在应用的发展越来越向前端靠拢,前端的代码越来越复杂,我们确实需要一个前端的框架,我们更需要优秀的前端架构师. 如果还有人象3年前一样鄙视前端开发工程师,那么他们将会被淘汰. 另外,原先我们所谓的前端工程师大家理解成就是简单切个图,套套页面,但如果真这样理解,这又out了.

angular问题总结与反思 - big-brother

- - 博客园_首页
      因为工作中实际开发需要,才开始接触angular框架. 从当初的比葫芦画瓢,被各种问题、概念折磨摧残,到现在有一定的了解认识,觉得有必要将自己的认识进行简单的总结.       目前业内盛行各种MV**框架,相关的框架不断涌现,而angular就是其中的一种(MVVM). MV**框架其实最核心的问题就是将view层和model分离开来,降低代码的耦合性,做到数据和表现的分离,MVC、MVP、MVVM均有相同的目标,而他们之间的不同就在于如何把model层和view关联起来.

9月更新

- 貝殼 - 中国嫁日记

Shareaza 2.7.8.0 更新

- - eMule Fans 电骡爱好者
Shareaza 是一款著名的开源 P2P 文件共享客户端(P2P Filesharing Client),在著名开源项目网站 Sourceforge 下载量常年排名前十,支持多种文件共享和发布网络是它的特点,目前支持的有:Gnutella2、Gnutella、eDonkey2000(电驴)、HTTP、FTP、BitTorrent(BT)、DirectConnect(DC++).

ETL概述(原创)

- - ITeye博客
ETL,Extraction- Transformation-Loading的缩写,即数据抽取(Extract)、转换(Transform)、装载(Load)的过程,它是构建数 据仓库的重要环节. ETL是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程,目的是将企业中的分散、零乱、标准不统一的数据整合到一起,为 企业的决策提供分析依据.

PL/SQL动态SQL(原创)

- - ITeye博客
使用动态SQL是在编写PL/SQL过程时经常使用的方法之一. 很多情况下,比如根据业务的需要,如果输入不同查询条件,则生成不同的执行SQL查询语句,对于这种情况需要使用动态SQL来完成. 再比如,对于分页的情况,对于不同的表,必定存在不同的字段,因此使用静态SQL则只能针对某几个特定的表来形成分页.

将原创进行到底

- - 杨晖的博客-TV2.0的实验田
——来源《投资者报》 记者 占昕.     “六年前的某一天,杨晖来到我当时工作的外滩中心楼下的咖啡厅,她对我讲她要办一个叫《波士堂》的电视节目. 俺当时心里咕嘟着,‘她也太想当boss了吧’. ”这是唯众六周年晚宴,睿狮广告传播的首席战略官沈柏屏在留言卡片上写下的一段话. 或许你尚来不及知道她的名字,但你一定知道《波士堂》、《谁来一起午餐》、《开讲啦》、《这会儿不上班》等风靡全国的电视节目.

[原创] 国人原创咆哮体《哔哔儿你伤不起》

- Tony - 黑莓时光
这是来自新浪微博上的国人哔哔儿 廖小肥 的原创咆哮体内容,非常犀利也非常有爱,快快分享阅读. 《哔哔儿你伤不起》| 原创咆哮体 by @廖小肥. 谁跟老子讲黑莓是世界上最屌的手机啊. 尼玛谁说黑莓在911事件中一战成名啊. 那是因为老外的黑莓都开通BIS和BES啊. 国内玩黑莓的淫才TM百分之几啊.

Google Toolbar for Firefox停止更新

- ccyuling - Solidot
Google多个Firefox扩展程序都没有随Firefox的更新而更新,如Google工具栏和最近才发布的按图搜索的扩展都不支持Firefox 5. Firefox 5实际上是Firefox 4的安全更新,兼容Firefox 5并不很难. Google官方博客解释说,Google Toolbar for Firefox提供的许多功能都已经内置在浏览器中.