AngularJS的一些坑以及注意点

菜鸟学习angular记录贴，记录学习过程中遇到的问题点以及被坑的地方。持续更新。有误的地方通知下。
1：angular 跨域请求

跨域请求有两种解决方式：

一种是使用jsonp方式。这种方式的缺点是需要在每个url加上参数：callback=JSON_CALLBACK，另外一个缺点是只支持get，不支持post。优点是任何浏览器都支持。

一种是使用CORS方式。缺点是需要服务器支持CORS以及浏览器支持（IE6\7\8无法支持）。优点是前端请求无需任何改动，且支持get、post。
CORS科普见这：点我。

2：$http()请求

注意点：$http()请求为异步进行。输出信息见下面脚本。所以需要处理的业务全部丢到sucess内进行执行。不要在外部进行处理。

[javascript]  view plain  copy

1. <span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"></span><pre name="code" class="javascript">$http.get('xxxx').success(data){  
2.     $scope.data=data  
3.         console.log($scope.data);//正常输出  
4. };  
5. console.log($scope.data);//输出undefined</span></span>  

3：UI-ROUTER局部刷新（本条仅仅为了记录信息）

UI-ROUTER官网：点我。

UI-ROUTER有状态嵌套、视图嵌套两种形式。详细介绍：点我。

使用视图嵌套时，整个页面会全部重新加载。

使用状态嵌套时，父状态不会全部重新加载，只会在重新加载子状态。

4：disabled无法正常工作。

下面代码displed进行绑定时会出现无法正常工作，采用ng-display才可以正常工作。

[html]  view plain  copy

1. <span style="font-size:18px;">  Click me to toggle: <input type="checkbox" ng-model="checked"><br/>  
2. <button ng-model="button" disabled="{{checked}}" >Button</button><!-- 无法正常工作 -->  
3. <button ng-model="button" ng-disabled="checked" >Button</button><!-- 可以正常工作 --></span>  

原因是：HTML规范不要求浏览器对布尔型属性必须给出值，例如disabled (它们存在表示true，不存在表示false)。如果我们放置了一个Angular动态表达式到这样的属性上，在浏览器删除属性时绑定信息将会丢失。ngDisabled指令解决了disabled属性存在的这个问题。这个指令不会被浏览器删除，并提供了一个永久的可靠的地方存放绑定信息。

5：ng-list使用空格进行分隔。

ng-list=‘ ’是无法正常工作，正常使用ng-list='/[- |]/'。

6：关于ng-options获取id值的问题

使用ng-options绑定后dom结构中options的value值为“0，1，2...”，无法自定义设置。

获取id值有两种方式：

[html]  view plain  copy

1. $scope.cities = [  
2.   {name: 'Seattle',id:'999'},  
3.   {name: 'San Francisco',id:'888'},  
4.   {name: 'Chicago',id:'777'},  
5.   {name: 'New York',id:'666'},  
6.   {name: 'Boston',id:'555'}  
7. ];  
8. //第一种方式  
9. <select ng-model="sel" ng-options="city.name for city in cities">  
10.     <option value="">Choose City</option>  
11.  </select>  
12.  {{sel.id}}  
13.  //上面代码中会把city.name展示到option中  
14.  //且把选中的city绑定到sel。通过sel.id就能获取选中的id值。  
15.    
16. //第一种方式  
17. <select ng-model="cityId" ng-options="city.id as city.name for city in cities">  
18.     <option value="">Choose City</option>  
19.  </select>  
20.  {{cityId}}  
21.  //上面代码会把选中的city的id值绑定到cityId。通过cityId就能获取选中的id值。  

7:angular单元测试ui-router报错：Error: [$injector:unpr] Unknown provider: $stateParamsProvider <- $stateParams

问题点：待测试的单元模块中有注入了ui-router的$stateParams，执行单元测试的时候报错。

解决方法：从karma的配置文件必须中引入：files:['angular-ui-router.js的路径']；

在beforeEach中先moke('ui.router')；

注入$statePatams；

controller代码：

[javascript]  view plain  copy

1. staffModule.controller('staffListCtr',function($scope,$stateParams,$state,$window,staffSer){  

[javascript]  view plain  copy

1. $stateParams.departId=$stateParams.id;  

[javascript]  view plain  copy

1. $scope.xxx=staffSer.xxxx;  

[javascript]  view plain  copy

1. })  

unit代码：

[javascript]  view plain  copy

1. describe('unit-controller-test',function(){  

[javascript]  view plain  copy

1. //mock ui-router,下面的inject需要用到  

[javascript]  view plain  copy

1. beforeEach(module('ui.router'));  

[javascript]  view plain  copy

1. //mock service服务模块  

[javascript]  view plain  copy

1. beforeEach(module('serviceModule'));  

[javascript]  view plain  copy

1. beforeEach(module('staffModule'));  

[javascript]  view plain  copy

1. describe('staff-list-ctr-test',function(){  

[javascript]  view plain  copy

1. var staffListCtr,scope;  

[javascript]  view plain  copy

1. beforeEach(inject(function ($controller,$rootScope,$stateParams) {  

[javascript]  view plain  copy

1. scope= $rootScope.$new();  

[javascript]  view plain  copy

1. //对stateParams赋值  

[javascript]  view plain  copy

1. $stateParams.departId=1;  

[javascript]  view plain  copy

1. staffListCtr=$controller('staffListCtr',{$scope:scope});  

[javascript]  view plain  copy

1. }));  

[javascript]  view plain  copy

1. it('staff list departId ',function(){  

[javascript]  view plain  copy

1. expect(scope.departId).toEqual(1);  

[javascript]  view plain  copy

1. });  

[javascript]  view plain  copy

1. });  

[javascript]  view plain  copy

1. });  

8:AngularJS使用$window控制页面控制跳转

在controller控制页面跳转有下面几种方式：

1：$window.location.href="www.csdn.NET";//原也签打开

2：$window.open("www.csdn.net");//新也签中打开

3：ui-router：$state.Go(stateName,params);