10 逻辑完善以及bug修复
2017-05-14 23:29
211 查看
进行到这里,我们应用开发已经接近尾声,我这里基本就是应用开发的记录过程,讲解的东西很少,有问题可以在评论区讨论呦。下面进入最后调整的阶段。
预览我们的应用,会发现首页的职位列表,也会显示收藏的星星图标,这里我们不需要它:
我们先来进行调整职位列表的组件模块:
positionlist.html:
这里把是否显示小星星的条件由是否登录改成由其父控制器来控制,打开positionlist.js文件:
这时,首页的职位列表的收藏图标已经消失了,但是我的收藏的小星星也不见了,而我们在收藏列表里是需要它的:
打开favorite.html文件:
现在我们的收藏图标就出现了:
还有首页的头部有一个去登录的按钮和定位的提示语,这是不合逻辑的,当我们是登录状态的时候,应显示用户名称,而在非登录状态显示这两部分,打开head组件部分,head.html:
修改对应的head.js文件:
修改后的效果:
现在进入职位详情页看一下:
我们现在是登录状态,底部显示去登录这不科学,打开positionCtrl.js文件:
此时页面效果如下:
我们想要的页面效果是出来了,但是收藏图标现在还不好使,来处理一下小星星,打开positioninfo.html,给小星星添加一个点击事件:
然后打开它对应的指令文件positioninfo.js文件:
现在我们来完成「投个简历」部分的操作:
打开position.html文件,给底部按钮添加一个点击事件:
然后打开positionCtrl.js文件来完善逻辑:
现在,应用已经修改完毕啦,我们来快速预览一下吧~
预览我们的应用,会发现首页的职位列表,也会显示收藏的星星图标,这里我们不需要它:
我们先来进行调整职位列表的组件模块:
positionlist.html:
<span ng-click="$event.stopPropagation();select(item)" ng-if="isFavorite" class="p-a icon {{item.select?'star-active':'star'}}"></span>
这里把是否显示小星星的条件由是否登录改成由其父控制器来控制,打开positionlist.js文件:
'use strict'; angular.module('app').directive('appPositionList',['$http', function($http){ return { restrict:'A', replace:true, templateUrl:'view/template/positionlist.html', scope:{ data:'=', filterObj:'=', isFavorite:'=' }, link:function($scope){ $scope.select = function(item){ $http.post('data/favorite.json',{ id:item.id, select: !item.select }).success(function(resp){ item.select = !item.select; }); }; } }; }]);
这时,首页的职位列表的收藏图标已经消失了,但是我的收藏的小星星也不见了,而我们在收藏列表里是需要它的:
打开favorite.html文件:
<div app-position-list data="list" is-favorite="true"></div>
现在我们的收藏图标就出现了:
还有首页的头部有一个去登录的按钮和定位的提示语,这是不合逻辑的,当我们是登录状态的时候,应显示用户名称,而在非登录状态显示这两部分,打开head组件部分,head.html:
<div class="head"> <span class="text" ng-hide="name">10秒定制职位</span> <button class="custom f-r" ng-hide="name" ui-sref="login">去登录</button> <span class="f-r text" ng-bind="'您好,'+name"></span> </div>
修改对应的head.js文件:
'use strict'; angular.module('app').directive('appHead',['cache', function(cache){ return{ restrict:'A', replace:true, templateUrl:'view/template/head.html', link:function($scope){ $scope.name = cache.get('name') || ''; } } }]);
修改后的效果:
现在进入职位详情页看一下:
我们现在是登录状态,底部显示去登录这不科学,打开positionCtrl.js文件:
'use strict'; angular.module('app') .controller('positionCtrl', ['$q', '$http', '$state', '$scope','cache', function($q, $http, $state, $scope, cache) { $scope.isLogin = !!cache.get('name');
此时页面效果如下:
我们想要的页面效果是出来了,但是收藏图标现在还不好使,来处理一下小星星,打开positioninfo.html,给小星星添加一个点击事件:
<img ng-show="isLogin" ng-src="{{imagePath}}" class="p-a" ng-click="favorite();">
然后打开它对应的指令文件positioninfo.js文件:
'use stict'; angular.module('app').directive('appPositionInfo', ['$http', function($http) { return { restrict: 'A', replace: true, templateUrl: 'view/template/positioninfo.html', scope: { isActive: '=', isLogin: '=', pos: '=' }, link: function($scope) { $scope.$watch('pos', function(newValue) { if(newValue){ $scope.pos.select = $scope.pos.select || false; $scope.imagePath = $scope.pos.select ? 'image/star-active.png' : 'image/star.png'; } }); $scope.favorite = function() { $http.post('data/favorite.json', { id: $scope.pos.id, select: !$scope.pos.select }).success(function(resp){ $scope.pos.select = !$scope.pos.select; $scope.imagePath = $scope.pos.select ? 'image/star-active.png' : 'image/star.png'; }); }; } } }]);
现在我们来完成「投个简历」部分的操作:
打开position.html文件,给底部按钮添加一个点击事件:
<button class="bottom-btn c-w" ng-bind="message" ng-click="go();"></button>
然后打开positionCtrl.js文件来完善逻辑:
'use strict'; angular.module('app') .controller('positionCtrl', ['$log', '$q', '$http', '$state', '$scope', 'cache', function($log, $q, $http, $state, $scope, cache) { $scope.isLogin = !!cache.get('name'); $scope.message = $scope.isLogin ? '投个简历' : '去登录'; function getPosition() { var def = $q.defer(); $http.get('/data/position.json?id=' + $state.params.id).success(function(resp) { $scope.position = resp; if (resp.posted) { $scope.message = '已投递'; } def.resolve(resp); }).error(function(err) { def.reject(err); }); return def.promise; }; function getCompany(id) { $http.get('/data/company.json?id=' + id).success(function(resp) { $scope.company = resp; }) } getPosition().then(function(obj) { getCompany(obj.companyId); }); $scope.go = function() { if ($scope.message != '已投递') { if ($scope.isLogin) { $http.post('data/handle.json', { id: $scope.position.id }).success(function(resp) { $log.info(resp); $scope.message = '已投递'; }) } else { state.go('login'); } } }; }]);
现在,应用已经修改完毕啦,我们来快速预览一下吧~
相关文章推荐
- OJ2.0userInfo页面Modify逻辑bug修复,search功能逻辑实现
- 修复mac 下 make menuconfig 的bug以及自定义make menuconfig界面
- [正式发布]库存管理系统v1.1!修复大量BUG,以及UI显示!
- JAVA课程设计-20161223-功能的完善以及BUG排除
- ARM:裸板shell编程完善(匹配命令、修复bug)、G-Sensor重力传感器驱动基础
- shell全备份脚本(借鉴别人的,在其基础上修复完善了bug)
- iOS8.4后MPMoviePlayerController继续播放的bug以及修复方法
- Win10 Mobile/PC版《照片》更新以及下载:Bug修复和性能优化
- 修复第一个游戏的小bug以及完成第二个游戏。
- 简易拖拽以及bug的修复
- OJ2.0userInfo页面Modify逻辑bug修复,search功能逻辑实现
- MDT 2013 Update 1 Preview 部署 Windows 10之MDT部署BUG修复
- <转>Alibaba-AndFix Bug 热修复 以及添加到自己项目中
- ionic ios打包配置以及bug修复整理
- 万年历_二级指针(存在部分bug以及不完善之处)
- 移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo
- debug : 没有在逻辑错误处加断言拖延了bug修复的时间
- 线程范围内共享变量的概念与作用以及ThreadLocal类及应用修复bug
- [课程设计]Scrum 1. 9 多鱼点餐系统开发进度(最后页面完善&修复BUG&用户测试反馈)
- iOS ,不提交审核,修复某些线上bug以及线上更新