AngularJS的一些坑以及注意点

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

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

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

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

2：$http()请求

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

 "font-size:18px;">"font-size:18px;">"font-size:18px;">"code" class="javascript">$http.get('xxxx').success(data){
     $scope.data=data
         console.log($scope.data);//正常输出
 };
 console.log($scope.data);//输出undefined

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

UI-ROUTER官网：点我。

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

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

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

4：disabled无法正常工作。

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

 <span style="font-size:18px;">  Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
 <button ng-model="button" disabled="{{checked}}" >Buttonbutton>
 <button ng-model="button" ng-disabled="checked" >Buttonbutton>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值有两种方式：

 $scope.cities = [
   {name: 'Seattle',id:'999'},
   {name: 'San Francisco',id:'888'},
   {name: 'Chicago',id:'777'},
   {name: 'New York',id:'666'},
   {name: 'Boston',id:'555'}
 ];
 //第一种方式
 <select ng-model="sel" ng-options="city.name for city in cities">
     <option value="">Choose Cityoption>
  select>
  {{sel.id}}
  //上面代码中会把city.name展示到option中
  //且把选中的city绑定到sel。通过sel.id就能获取选中的id值。

 //第一种方式
 <select ng-model="cityId" ng-options="city.id as city.name for city in cities">
     <option value="">Choose Cityoption>
  select>
  {{cityId}}
  //上面代码会把选中的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代码：

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

 $stateParams.departId=$stateParams.id;

 $scope.xxx=staffSer.xxxx;

 })

unit代码：

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

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

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

 //mock service服务模块

 beforeEach(module('serviceModule'));

 beforeEach(module('staffModule'));

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

 var staffListCtr,scope;

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

 scope= $rootScope.$new();

 //对stateParams赋值

 $stateParams.departId=1;

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

 }));

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

 expect(scope.departId).toEqual(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);