**这是我之前用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);
};