用angularjs遇到的一些问题及解决方案
来源:互联网 发布:淘宝能卖的香烟 编辑:程序博客网 时间:2024/05/22 11:40
**这是我之前用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);
};
- 用angularjs遇到的一些问题及解决方案
- myeclipse 遇到的一些问题及解决方案
- myeclipse 遇到的一些问题及解决方案
- myeclipse 遇到的一些问题及解决方案
- PCL:遇到的一些问题及解决方案
- .Net开发工作中常遇到的一些问题及解决方案
- Oracle安装过程中遇到的一些问题及解决方案
- Win2003下面安装SQLSERVER2000遇到的一些问题及解决方案
- 运行hadoop程序遇到的一些问题及解决方案
- react-native里TextInput遇到的一些问题及解决方案
- hbase测试过程中遇到的一些问题及解决方案
- android开发中遇到的一些问题及解决方案
- 移动前端开发遇到的一些问题及解决方案
- 变更手机内部存储遇到的一些问题及解决方案
- 网页制作中遇到的一些问题及解决方案
- react-native里TextInput遇到的一些问题及解决方案
- 编程中遇到的一些问题及解决方案
- Java学习中,所遇到的一些问题及解决方案
- Kinect on Ubuntu with OpenNI
- 内存泄漏工具
- 团队沟通
- Java中的深拷贝和浅拷贝
- openstack学习笔记 --- glance 客户端管理镜像image
- 用angularjs遇到的一些问题及解决方案
- HDU 4666 Hyperspace
- 虫食算
- 第六周项目 3 完成第九章知识点思维导图
- 第八周——重载运算符——项目一(2)利用友元函数实现+-*/重载
- serialVersionUID作用
- 把android assets文件夹内的文件存储到sd卡中
- maven 中使用 json-lib 的小问题
- E - Super Jumping! Jumping! Jumping! HDU 1087 (基础动态规划)