由于版本不同,可能有些问题在某些版本下出现,某些版本下不出现.

指令不可平行(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'
});
});

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

angular常见坑洞的更多相关文章

  1. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  2. 常见的几个angular.js的问题

    来源于网络收集 一.ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的.而ng-if实际上控制dom节点的增删 ...

  3. Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...

  4. C++常见错误坑洞

    指针没初始化就使用*解引用运算符; 连续delete释放new指针; 使用delete 是否常规普通变量内存; 地址直接复制给制作

  5. Angular移除不必要的$watch之性能优化

    双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...

  6. 自定义Angular插件 - 网站用户引导

    最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所 ...

  7. Angular Service入门

    1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务.可以通过https://docs.angularjs.org/api/ng/service查看Ang ...

  8. Angular 基础入门

    简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...

  9. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

随机推荐

  1. Android启示录——开始Android旅途

    为了明年可以开始进行android程序开发,开始从零开始学习android,仅以此代表第一步开始(*^_^*),开始搭建环境…… 1. 软件下载 http://developer.android.co ...

  2. Javascript面向对象编程(二)--- 构造函数的继承

    这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动 ...

  3. webpack打包

    (1) 首先生成一个package.json文件 进入项目文件的根目录执行npm init 在根目录中生成一个package.json文件 (2)全局安装webpack  执行npm install ...

  4. javascript数组浅谈3

    前两节说了数组最基本的创建,队列方法,排序和一些操作方法,这节说说迭代和归并方法. every()方法 & some()方法 这两个方法会对数组中的每一项运行给定函数,然后返回一个布尔值,理解 ...

  5. seajs快速了解

    详情请点击原文     SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,S ...

  6. .NET破解之分享给新注册的朋友

    前些日子,在论坛里看了有人发过这个软件,也有大神分析过网络版,如果是重帖,请删除吧:正好11.11注册了很多新会员,给他们一个见面礼吧,抛砖引玉,我才来论坛的时候,也是看着前人教程慢慢学习的:好久没冒 ...

  7. 读书笔记2014第3本:Visual Studio程序员箴言

    Visual Studio 2010是我经常使用的程序开发工具,也知道VS中有大量的快捷键可以帮助提高效率,可惜就是不愿意记忆,最近在学vim的时候快速把<Visual Studio程序员箴言& ...

  8. linux服务器如何设置目录权限,让开发只能在测试目录下开发,不在线上目录上开发

    当一台服务器上,既有测试环境,也有生成的环境,开发需要在线上测试,如果开发生产环境的权限,那开发容易误操作 需求如下: (1)生产环境的代码,必须有专用的账号登陆进行管理 (2)开发测试环境的代码,开 ...

  9. 【读书笔记】iOS-本地文件和数据安全注意事项

    一,程序文件的安全. 可通过将JavaScript源码时行混淆和加密,防止黑客轻易地阅读和篡改相关的逻辑,也可以防止自己的Web端与Native端的通讯协议泄露. 二,本地数据安全. 对于本地的重要数 ...

  10. Android之 左右滑动菜单

    近来学习了极客学院有关于界面左右滑动的视频,就在这里写个博客,巩固一下知识点,以免忘了. 这里主要介绍界面是如何左右滑动的: 1.首先我们应该设置好将要滑动的三个界面,即leftMenu.middle ...