【经验】AngularJS

1.关于ng-model

<textarea id="feature_name" class="col-sm-3" placeholder="软件特征" ng-model="data.dlls[$index]" ng-repeat="i in data.dlls track by $index"></textarea>

注意ng-model="data.dlls[$index]",如果改成ng-model="i",虽然会成功将dlls里的内容显示在文本区中,但是当dlls.push新项时(就创建新的textarea),之前的textarea中显示的内容将消失。
2.当directive被放置到控制器中时,在directive里的ng表达式所引用的变量与直接写在控制器的html中的变量无异。
3.每一次ng事件,都会检查所有的值。ng-checked是最好的证明,如果一个input 被选中,然后去触发其他元素的ng事件,这个input上的ng-checked中绑定的事件处理函数也会被执行。
同样的,$watch监听着任何事件,只要触发了任何事件,其中的函数都会被执行(不符合逻辑)。
4.$cookies.a 返回的是一个字符串,而$cookieStore.a返回的可以是number或boolean
5.之前想要根据cookie判断信息是否显示过某段文本,文本形如

<p id="updateInfo" ng-if="updateInfo" update-info>
homeApp.controller('homeMainCtrl', ['$scope', '$timeout', '$cookieStore', function($scope, $timeout, $cookieStore){}]);
homeApp.directive('updateInfo',['$timeout', '$cookieStore', function($timeout, $cookieStore){
    return { 
        priority:599,//注意这个值
        link: function(scope,elem,attr){
            $cookieStore.put('updateInfoShowed',false);
            if($cookieStore.get('updateInfoShowed')){
                scope.updateInfo = false;
            }
            else {
                scope.updateInfo = true;
                $cookieStore.put('updateInfoShowed',true);
                $timeout(function(){
                    elem.slideToggle();
                },8000);
            }
            console.log(document.getElementById('updateInfo'))//注意这个console
        }
    };
}]);

 

当priority:599时,根本没有执行console。
猜测:是因为ng-if的指令优先度较高,执行我这条指令时,p元素已经被ng-if指令移出出dom或者设置dispaly:none了,所以没有执行link中的代码。
例证1:把ng-if改为ng-show,console出p的dom。
例证2:当priority:600时,console结果为null,也就是说提高了优先度console就被执行了。

例证2输出null意味着在本指令的link函数执行时元素不存在dom中。而例证1说明在本指令的link函数执行时dom已经存在。
那么,例证2中元素之所以不存在,原因可能有2:
(1)是否因为ng-if?难道ng-if的优先度比600要大?
如果是这样,那么599与600间的分界是什么导致的?
(2)还是因为ng-if,而ng-if的优先度确实是599。
在这种假设下,另一种可能性是ng-if在compile期做过些什么。

6.alert会阻塞线程,所以要使用setTimeout(function(){alert()},0)
7.jQuery.ajax({url:"/a.html",type:"GET"})和jQuery.get("/a.html")有区别,前者似乎会被angularjs认为是对文件的访问,后者会被ng进行路由处理。
8.重载视图使用 $route.reload();
9.在directive里elem.on('click',function(){scope.day = 'yesterday'}),这是想改变scope的day,但会导致controller中的$scope.$watch失效,view里也不会更新(即使是在directive所在元素内)。
这种时候要写成

yesterday.on('click', function(){
    scope.$apply(function(){
        scope.day = 'yesterday';
    })
});

10.ng-cloak闪烁问题。写.ng-hide{display:none},然后在元素中添加.ng-hide
11.template文件中的html,应该保持其独立性,比如:
<div ng-template></div>
template.html:
<ul><li></li></ul>
固然这样写也可以:
<ul ng-template></ul>
template.html:
<li></li>
但是template.html就缺乏了独立性,它被限定了必须被一个ul所包括。
12.ng-class使用{xx:xx}[data-list-row]是无效的,只能换用驼峰写法。
13.ng-if会销毁dom,重现加载时会重载dom以及指令,恐怕作用域也会重载。但是ng-if所在的元素,其template不会被重载
14.子元素$emit,父元素$broadcast给那个子元素的兄弟元素,这可以,但是要注意事件的名称不能一致。
15.$location.search()可以获取?后的键值对
16.有混合ng的src与href一定要使用ng-src和ng-href。不然,前者会在某些浏览器上导致跳转到404页面。
17.$anchorScroll会根据hash跳转,但修改hash会导致页面刷新,要这么写:

var old = $location.hash()
$location.hash(id);
$anchorScroll();
$location.hash(old)

18.ng-change会根据ng-pattern决定是否触发。要每次按键触发使用ng-press
19.ng-style="{true: {'color': 'red'}}[true]"
20.$timeout在作用域on('$destory')时一定要销毁
21.ng-bind="010203"会显示10203,可能是进制问题
22.使用ng-if在指令或者指令的父元素上时,可能会导致ng-if这个指令先于自定义指令被执行,导致自定义指令执行时找不到dom而无效。
23.我曾在指令内试图将使用了ng-model="formData.password"绑定数据的formData传给服务器,但结果formData为undefined。解决办法是在指令link里加scope.formData = {};原理未知。
24.给指令设置scope:{}可能会导致其中的子元素上的指令失效
25.ng的$resource服务若无写getGroup: {url: '/client/group/index', method: 'GET', responseType: 'arraybuffer'}这里的responseType,会默认返回的是json作处理,如果不是json会报错如:
Error: [$resource:badcfg] http://errors.angularjs.org/1.2.26/$resource/badcfg?p0=object&p1=array
25.1 其实应该写isArray: true
26.不能在$resource里刷时间戳,如:
 clientDetail: {params: {m: 'eqdetail', t: (new Date).getTime()}, method: 'GET'} 
这样会导致所有时间戳都固定为同一个数字,必须写成
 softwareService.clientDetail({uuid: client.uuid, t: (new Date).getTime()}) 
27.指令中使用replace:true时,要保证模板被包括在一个容器中,
<input /><p></p>——这样是不行的,会报错如:Error: [$compile:tplrt] Template for directive 'rewardPoint' must have exactly one root element. /js/apps/main/tpl/rewardPoint.html
<div><input /><p></p></div>——必须如此加个div包括,其实这样我何苦使用replace:true
28.ng-href="{{ down({fileType: 'csv'}) }}" ng-href中使用函数一定要在最外面用大括号括起来,其实在html里使用ng表达式写函数都得这么干
29.得注意变量命名,如果命名tab-index,在{{ tab-index }}会理解为tab 减去 index,常常结果为0。
30.若在作用域中写$scope.f = function(d){$scope.data = d;};再在其子作用域中调用scope.f('text');结果会给父作用域的$scope.data赋值。
应该改写成this.data = d;
31.ng-click会触发ng循环,所以执行的代码中不能执行$apply
32.scope.vm的最大作用是让子元素的成员改变同时能改动到父元素的成员。
33.单例模式如factory,其生命期为应用的生命期。所以是否使用factory存放vm,需要考虑。
34. $apply会使ng进入 $digest cycle , 并从$rootScope开始遍历(深度优先)检查数据变更。
$digest仅会检查该scope和它的子scope,当你确定当前操作仅影响它们时,用$digest可以稍微提升性能。
35.directive中执行的 $evalAsync , 会在angular操作DOM之后,浏览器渲染之前执行。
36.在html里的ng-click要获取this,可以使用$event.currentTarget
37.var binder = scope.$on('xxx');要解绑,执行binder()
38.$cookieStore.get(...),只能访问到path允许访问的值
39.ng-if会产生子作用域。使用这种指令时,其内部无作用域指令对scope的修改都会修改到它的作用域;如果目标作用域在ng-if之上就会出错。
解决方案一般有1.使用ng-show代替ng-if。2.使用factory注入,修改factory
40.ng发get请求,貌似会删除值为undefined的属性
41.使用track by可以免去移除dom再生成dom的步骤提高性能。
41.1 但是正因为不再生成dom,所以新生成的元素上的directive指令也不会被运行。所以能不能既利用原有dom,又渲染指令呢?
42.
$http().then(function(n)) // n是包装过的,真实数据在n.data里
$http().success(function(data)) // data就是真实数据
43. 我常常疑惑什么应该写在controller里,什么应该写到directive里。
controller会先于任何directive加载,而directive加载会有顺序,先子后父。根据这个来考虑怎么写吧。
44.当directive内有个templateUrl的子directive时,directive内使用elem.find()貌似找不到子directive的内容。
45.ng里可以在controller或factory等任何地方中通过$compile服务渲染指令。但指令不会即时被渲染,至少不会在controller中立即被渲染,而是在后续的检查中被渲染。除非你在父作用域或指令的作用域上调用了scope.$digest(),则指令将被立即渲染。
立即渲染意味着立即发起对模板的请求。

posted @ 2017-03-02 17:33  FranQ  阅读(429)  评论(0编辑  收藏  举报