用angularjs遇到的一些问题及解决方案

**这是我之前用ionic做ios客户端的时候遇到的一些问题，当时因为没有写博客，所以记录到word里，现在将它分享出来，供大家参考参考，也希望给一些宝贵意见。

Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3和JavaScript做出原生应用，ionic的理念类前端开发的BootStrap，js部分是基于AngularJS框架。**

1、模板里面嵌套模板，子页面加载时无初始页，解决办法是在父页面的路径上直接加载上子页面的路径；

2、为选中选项添加class，ng-class=“{selected:$state.includes('tab.dash.courseList')}"；为选中选项添加小图标，由于上面那种方法不识别在类名中加有“-”，所以不能直接加入图标的类名，只能在事先将它隐藏，然后在选中它时加上让它显示的类名；

3.编写登录时，在form表单上提交信息，总是报错，解决办法是将<form>去掉，直接在提交按钮上加上点击事件，然后将信息作为参数传递给控制器中的login方法；

4、在请求服务器时，因为是本地测试，总是失败，原来是出现了跨域的问题，解决办法是将后台登录那块加一个允许跨域的头部，header：“Access-Control-Allow-Origin：* ”。

5、编写注册时，请求方法为post，获取数据本应用dada，但是后台却获取不到数据，解决办法是：

（1）配置$httpProvider：

var myApp = angular.module('app',[]);
 myApp.config(function($httpProvider){
  $httpProvider.defaults.transformRequest = function(obj){
     var str = [];
     for(var p in obj){
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
     }
     return str.join("&");
 }
  $httpProvider.defaults.headers.post = {
        'Content-Type': 'application/x-www-form-urlencoded'
   }
});

（2）在post中配置:

$http({
     method:'post',
     url:'post.php',
     data:{name:"aaa",id:1,age:20},
     headers:{'Content-Type': 'application/x-www-form-urlencoded'},
     transformRequest: function(obj) {
       var str = [];
       for(var p in obj){
         str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
       }       
       return str.join("&");
     }
  }).success(function(req){
         console.log(req);  
})

6、 注册成功后 ，应跳转到提示成功那一页，并显示该账户名，但由于注册页和提示页不属于同一个控制器，所以访问不到该信息，解决办法是将提示页的控制器和注册页的控制器设为一致的，访问同样的作用域，还要将获得的数据赋值给变量，并且变量要设为全局变量，因为一旦移除页面，相应的作用域也会移除，数据将获取不到，后面实现跨控制器通信的页面我用到了服务的方法来解决，定义一个简单的服务：

angular.module('starter.services',[]).factory('instance',function(){  return {}})

然后把数据写到自定义的服务中,一定要将该服务注册到控制器的参数列表中，但自定义的服务一定要放在最后：

.controller('DashCtrl', function($scope, $http, $state, $location, $ionicSlideBoxDelegate,instance,datas) {
$http({
                method:'post',
                url:DOMAINNAME + '/user/videoPlay',
                data:{
                    alias:curriculumAlias
                }
            })
            .success(function(data){
                if(data.status == 'success'){
                    instance.live = data.live;
                    $state.go('tab.video');
                }
                else{
                    alert(data.message);
                }
            })
}

接着从服务中获取数据，一定要将该服务注册到控制器的参数列表中，但自定义的服务一定要放在最后：

.controller('VideoCtrl', function($scope, $http,instance) {

$scope.live = instance.live;

}

还有一种方法实现控制器之间通信是将变量写到$rootScope上；

7、对于注册时填写性别那一块，只要性别那一栏不选中，控制台将会报错，所以得给性别一个默认值，而且不能在页面中设置初始值，单选框绑定模型以后，值会从模型里面获取，所以要在控制器里面给性别赋一个初始值；

8、首页获取课表时间段时，由于在前台页面取到的是值，没有取到键名，所以总是返回不该返回的东西，最终解决办法是在控制器里将获取到的键名存到一个数组里，然后页面再从这个数组里获取时间段；

9、查找课程时，由于所有的课程及前面的标签都是从后台获取而来，所以不能手动为每个option设置一个唯一的model，最终解决方案为将该选项的索引传入model，以保证该model值得唯一性，代码如下：

<label ng-repeat='character in data'>
        <span>{{character.catalogName}}:</span>
        <select ng-model='selected[$index]' ng-options='character.catalogAlias+":"+key.alias as key.tagName for key in character.tag'>
            	<option value="">不限</option>
        </select>
</label>

10、在首页，找课程页进消息中心那一块，出现了URL跳了，页面却不跳的情况，而在个人中心却能正常跳转，最终的解决办法是在消息中心的路由中加载上首页和找课程页的view，如：

.state('tab.mesCent', {
                url: '/mesCent',
                views: {
                    'tab-myaccount': {
                        templateUrl: 'templates/tab-mesCent.html',
                        controller: 'MesCenterCtrl',
                        resolve: {
                            //loggedin: checkLoggedin//验证登陆状态
                        }
                    },
                    'tab-dash': {
                        templateUrl: 'templates/tab-mesCent.html',
                        controller: 'MesCenterCtrl',
                        resolve: {
                            //loggedin: checkLoggedin//验证登陆状态
                        }
                    },
                    'tab-findlessons': {
                        templateUrl: 'templates/tab-mesCent.html',
                        controller: 'MesCenterCtrl',
                        resolve: {
                            //loggedin: checkLoggedin//验证登陆状态
                        }
                    }
                }
            })

11、我的订单那一块的折叠本实用指令编写的，但是如果直接在指令上添加事件，却访问不到我在控制器里定义的事件，解决办法是直接将事件写在指令的控制器里，点击指令里面的按钮，却获取不到当前repeat的索引，解决办法是传入的参数为$parent.$index；

12、取消订单时发现返回的状态信息是订单不存在，仔细一看，发现获取的订单号和响应的不一样，解决办法是在后台将订单号的值加上双引号，因为后台的订单号用的是long型，而前端却没有这种数据类型；

13、首页的课表问题，由于是用slide指令编写的，但是一旦用repeat获取时间的时候，重新加载页面，首页的课表布局就全乱了，调试发现他将scroll那个div的宽度设为了0，解决方案是在控制器里传入$ionicSlideBoxDelegate，并在控制器里请求页面成功后加入$ionicSlideBoxDelegate.update();

14、长按事件on-hold；

15、将返回数据解析为html   ng-bind-html 

$scope.showInfo= function() {

    return $sce.trustAsHtml($scope.infos);

};