AngularJS的一些坑以及注意点

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

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

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

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

2：$http()请求

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

<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){
	$scope.data=data
        console.log($scope.data);//正常输出
};
console.log($scope.data);//输出undefined</span></span>

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}}" >Button</button><!-- 无法正常工作 -->
<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值有两种方式：

$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 City</option>
 </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 City</option>
 </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);