10 逻辑完善以及bug修复
2024-08-28 05:44:21
进行到这里,我们应用开发已经接近尾声,我这里基本就是应用开发的记录过程,讲解的东西很少,有问题可以在评论区讨论呦。下面进入最后调整的阶段。
预览我们的应用,会发现首页的职位列表,也会显示收藏的星星图标,这里我们不需要它:
我们先来进行调整职位列表的组件模块:
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');
} } };
}]);
现在,应用已经修改完毕啦,我们来快速预览一下吧~
最新文章
- Rabbitmq Exchange Type 说明
- mysql 按时间段统计(年,季度,月,天,时)
- Python decode与encode
- iOS请求服务器数据去空NSNull
- combotree的加载方法
- [Asp.net MVC]Asp.net MVC5系列——Razor语法
- sshfs远程文件系统挂载
- X-003 FriendlyARM tiny4412 uboot移植之添加相应目录文件
- js 实现异步上传图片+预览
- POJ - 1830:开关问题 (开关问题-高斯消元-自由元)
- 函数式编程之-定义能够支持Partial application的函数
- Intellij Idea 教程
- 360doc个人图书馆解决复制问题
- [Linux]Redhat7配置本地镜像源
- Google - chanceToLose24Game
- 牛客第二场A-run
- C语言中基本的数据类型
- Key Vertex (hdu 3313 SPFA+DFS 求起点到终点路径上的割点)
- The requested URL /phpmyadmin was not found on this server.
- 基于udp的套接字
热门文章
- 一套出完被喷爆的noip提高组+的题目
- Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法
- Web框架下安全漏洞的测试反思
- HDU 1426 dancing links解决数独问题
- 【BZOJ1403】Divisibility Testing(数论)
- ES6__class 的继承等相关知识案例
- Linux中命令选项及参数简介
- php之memcache学习
- 检测socket链接是否断开
- vue2.0单元测试(一)