angular常见坑洞
由于版本不同,可能有些问题在某些版本下出现,某些版本下不出现.
指令不可平行(v1.3.2):
多个指令不能这样一个接着一个排下去:
<div> <directive-one/> <directive-two/> <directive-three/> </div>
这样会导致的结果就是,只能读取<directive-one/>,后面的两个指令被自动无视掉~~~凭空消失鸟~~~
解决办法: 每个指令放在一个div里
<div> <directive-one/> </div> <div> <directive-two/> </div> <div> <directive-three/> </div>
还有个解决办法,把指令的restrict指定为EA,然后不要使用<directive/>这种形式,而是使用<div directive>这种形式.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
变量名和模块名不能相同(v1.3.2):
如下这样会报错,无法执行:
var model = angular.module('model',[]);
玫红色和墨绿色的两个名字不能相同,这个问题很少出现,应该是不会的.但是有一次确实遇到了...
解决办法: 不说了...
指令模板里面不能用出现指令名作为类名(v1.3.2):
比如一个指令叫 <menu-bar/>
那么,指令的模板里面,我不能再有 <div class="menu-bar">
如果遇到这种情况,它会报错: $compile:multidir
解决办法:
1.换不同的名字
2.指令的restrict中去掉C值
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
e.stopPropagation()阻止不了a链接的默认跳转事件(v1.3.2):
比如这样一段代码:
<a href="http://www.baidu.com"> <span ng-click="do($event)"></span> </a>
$scope.do = function(e){ e.stopPropagation(); }
这里我已经给do函数添加了阻止冒泡,但是a链接的跳转还是会触发的.
解决办法: 使用 e.preventDefault();
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
通过link函数中的iele来给元素绑定事件和通过ng-click(ng-...)等绑定事件的差异性(v1.3.2):
这个其实不是坑,只是使用上的一个注意点.什么意思呢?
就是说,指令的link属性第二个参数'iele',有时候我们可以通过$(iele).bind(),直接使用jq来给元素绑定事件:
link: function(scope,iele){ $(iele).find('input').bind('focus',function(){ scope.flag = true }) }
另外,我们也可以在html中使用 ng-click(ng-event...)等来绑定事件:
<input ng-focus="changeFlag()">
link: function(scope,iele){ scope.changeFlag = function(){ scope.flag = true } }
那么什么时候使用第一种,什么时候使用第二种呢?
是这样的,如果事件处理程序里,改变了当前scope下的属性值,也就是说,数据发生了改变,这个时候使用第二种,如果事件处理程序里,仅仅改变视图的显示(并非通过数据的改变来改变视图的显示),这个时候使用第一种.
为什么呢? 因为使用第二种,是ng自己绑定的事件,在执行事件以后,ng会自动进行脏值检测($digest),而自己绑定的事件,ng是不会检测的(虽然我做的过程中发现有时候也会检测...⊙﹏⊙b汗),这样,scope下数据模型发生改变,是不会被检测到的,需要手动去调用$digest,虽然也可以实现,但是就不符合ng的设计模式了.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
给指令添加控制器时候的scope问题(v1.3.2):
这个坑很大...一不小心陷入万丈深渊...
比如有一个指令:
<directive/>
指令是这样定义的:
module.directive('directive',function(){
return {
restrict:'E',
replace:true,
templateUrl:'index.html'
}
})
然后index.html是这样的:
<div ng-controller="controllerOne"> ... </div>
定义控制器:
module.controller('controllOne',function($scope){
$scope.a = 'a'
})
这样,正常的理解就是directive指令这个div,使用controllerOne来管理,它的scope就是controllerOne里面的$scope.
但是事实不是这样的,用这种方式定义的controller,$scope并非是一个单独的继承了父scope的scope,而是直接绑定在了根scope上!
解决办法: 在指令元素上绑定ng-controller属性,而不是指令的html模板上:
<directive ng-controller="controllerOne"/>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
使用ui-router路由切换时状态的事件(ui-router.min.js v0.2.12)
ui-router状态改变时会触发$stateChangeStart,$stateChangeSuccess,$viewContentLoading,$viewContentLoaded这些事件,但是这些事件不能绑定在状态的controller属性的控制器里:
$stateProvider.state('index',{
url:'/index',
resolve:{
rsv:'aService'
},
controller:function($rootScope,$scope,rsv){
$scope.username = rsv.getName();
$rootScope.$on('$viewContentLoading',function(event, viewConfig){
alert('视图开始渲染');
});
$rootScope.$on('$viewContentLoaded',function(){
alert('视图渲染完毕');
})
},
templateUrl:'./tpls/login.html'
});
这样做,每次进入index状态,都会实例化一个控制器,都会绑定一次事件,这样,$viewContentLoading和$viewContentLoaded事件会越来越多.
解决办法: 在外层的控制器的$rootScope里绑定事件.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
date过滤器:
使用date过滤器过滤时间时,时间的值如果是数字或者字符串数字,这个数字不是时间戳,而是当前时间毫秒数.也就是时间戳*1000
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
使用ui-router路由的$urlRouterProvider无效(ui-router.min.js v0.2.12)
定义了一个路由,然后通过$urlRouteProvider来定义一个重定向: 当匹配到'/'的时候,重定向到'/all'
flightApp.config(function($stateProvider,$locationProvider,$urlRouterProvider){ $locationProvider.html5Mode(true).hashPrefix('!'); $stateProvider.state('index',{ url:'/:date', templateUrl:'tpls/flights.html', resolve:{ 'filterFlights':function($http,$stateParams){ return $http({ method:'get', url:'cache/flights_'+($stateParams.date || 'all')+'.json' }); } }, controller: 'fligntsControll' });
$urlRouterProvider.when('/','/all');
});
但是这个重定向并没有实现,也没有任何报错.原因不详.
解决办法:修改顺序,把$urlRouterProvider.when()这段代码移到$stateProvider.state()之前
flightApp.config(function($stateProvider,$locationProvider,$urlRouterProvider){ $locationProvider.html5Mode(true).hashPrefix('!'); $urlRouterProvider.when('/','/all'); $stateProvider.state('index',{ url:'/:date', templateUrl:'tpls/flights.html', resolve:{ 'filterFlights':function($http,$stateParams){ return $http({ method:'get', url:'cache/flights_'+($stateParams.date || 'all')+'.json' }); } }, controller: 'fligntsControll' }); });
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
