今天完成的事情：

整理一下萝卜多前台的一些相关内容和期间遇到的一些问题：

前台部分：

大略情况如图：

首页这里，数据统计没有接口，所以只能手动添加写死在html中。

轮播图--最新职位轮播和伙伴之言轮播以及找职位页公司及在招职位轮播，找职位banner轮播：

在任务中接触的轮播图是一整张图片的轮播，即找职位页banner轮播；其他3个轮播都不太一样：

1、最新职位轮播每页展示的4个条目，每次展示一页，这里只需把图片替换为包含4个子元素的DOM对象，将请求返回的数据进行截取后依次repeat即可；ps：虽然轮播里向后台请求了20条数据，但是后台如果数据量不足20，会出现最后一页有空白的情况，从最优体验来说，应该不出现这样的情况，所以可以考虑两个方式：

一个是将数据不足的部分删除，只保留前面的4的倍数项，但这样信息就不完整了，所以不推荐；

第二个是将数据不足的部分，抽取重复的数据进行填充，如：

data = response.data;
//数据条目不为4的倍数时,截取数组开头n个数据进行补全
if (data.length % 4) {
    angular.forEach(data.slice(0, 4 - (data.length % 4)), function (item) {
        data.push(item)
    })
}

这里随机选取会更好些。

2、伙伴之言逐项移动：尝试过修改uibootstrap轮播样式实现没成功，自己写的轮播前后衔接问题，控制问题都使得结果不满意，最后采用了jq插件，这里的原理详见上篇日报 地址点这儿；

3、公司在招职位轮播，这里的轮播是纵向轮播，可以通过修改bootstrap的transfrom值实现：

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  left: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  left: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

不得不提的是，如果在同一个页面内使用了同一个轮播插件，如uibootsrap-carousel，需要为轮播分别设立单独的controller，或者将其写入directive，隔离其作用域scope=‘{}’，否则绘出现两个轮播相互影响的状态。

找职位：

侧边导航栏，需要将职位进归类，最初的时候按照原型图将参数都写进html，之后发现UI图不一样，按照ui改好后，参考3期萝卜多这里又有变化。所以，如果每次变化都修改html调整结构很麻烦；将所有数据按照层次关系构建对象，将导航栏生成与数据操作都封装为directive，如：【{‘产品’：{}}，{‘技术’：{}}，{‘大数据’：{}}】，这样需求有变化只需要对数据对象进行增删改操作即可。设置好数据后，点击导航里的某个项目，则带参数跳转至搜索页：如

<a ui-sref="job.search.searchjob({'category':item.category,'subCategory':child.type})">{{child.name}}</a>

搜索栏：‍‍带参数跳转；‍‍

最新职位、推荐职位：通过点击标题切换展示页面，分别展示最新、推荐的职位信息。可使用ng-class，根据传入的值不同实现高亮对应标题，这里可以使用0,1，也就是recommend的值。点击更多则带参数对应的recommend值跳转，跳转后显示对应标题，在目标controller进行后续操作；

搜索职位、公司：这里比较重要的是筛选搜索栏的实现，最初在考虑这个问题时有思考多选情况，测试接口时发送多个数据无数据返回，故搁置了，只做了单选。完成后台之后，调整前台时，接口已经可以正常返回数据，所以，给directive中添加了多选的内容：详情点击见日报，ps：搜索‘所属行业’时，只要该字段有值返回数据始终为空，后端接口问题or请求格式有问题？；

还有一个是分页，这里可以使用uibootstrap的分页插件，插件主要的几个属性为

total-items（总数据条数，请求返回参数里的total，计算页数用）

ng-model（这里为当前的页码pageCurrent）

max-size（显示的按钮数目）

items-per-page（设置每页需要显示的数目，计算页数用）

这里后台已经完成了，只需发送请求时添加字段page（当前页码）和size（请求条数，默认10）即可；

职业详情、公司详情：‍‍职业详情里‘我感兴趣’用一个模态框实现即可，一个需要注意的地方是，返回数据换行符问题，这里可以用css属性white-space来设置；

公司详情里有个‘公司详情’和‘在招职位’的切换，这里要设置标题高亮

找精英：

更多公司：这个页面可以用之前的搜索公司页，但是这里有个banner图，并且没不用显示搜索框，可以设置一个单独的路由状态or传参数后用ng-if来控制该渲染和不渲染的元素，由于我高亮标题是通过路由状态实现，所设置了一个state（搜索公司属于找职位页，这里属于找精英页）

‍

关于我们

两个标签的切换，这里感觉没必要用路由，所以只是通过参数控制即可（vm.card）；同时和footer部分的关于我们、联系我们关联，这里如果这么做需要注意一个问题：

vm.card = paramster.get('tag');
vm.change = function (n) {
    vm.card = n;
    paramster.set({'tag': n})
}

‍‍在关于我们这个页面内点击footer部分的两个跳转时，由于路由状态始终未改变,所以，controller内的参数获取不会重复执行，只在载入的时候执行一次，所以，在点击是要刷新路由，可在标签内添加ui-sref-opts="{reload:true}"强制刷新；

补充：===========================

关于高亮标签：

1、ui-router自带一个指令ui-sref-active包裹ui-sref，可以给当前路由添加样式，但在嵌套路由中不太好用，比如我在找职位页中进入了职位详情，这里active会失效；

2、使用$location服务获取path，根据path配合ng-class添加高亮，还是有点麻烦，父页面需将子页path添加进判断条件。可以简化的一点是可以通过简单正则筛选出父页的path执行匹配

.filter('urlTest', function () {
    return function (url, string) {//url：父页tath；string：当前页path  
        var a = new RegExp('^' + string);
        return a.test(url)
    }
})

3、根据当前路由state进行判断，这个会简单很多，$state.includes(‘parentState’)和$state.is(‘State’),前者判断当前state是否为parentState或其子级，返回布尔值，后者判断当前state是否为State，回布尔值；

不管是使用2还是3，都可以在路由变化的时候执行赋值判断，因为这个每页都要判断，所以在run（）语句块里，添加$stateChangeStart或$stateChangeSuccess事件进行赋值：

.run(function ($rootScope, $state, $stateParams, $window) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        $rootScope.currentState = $state;
    })
})

在任意页面html中，就可以使用currentState.includes()或currentState.is()进行判断

此方法在uirouter1.x版本中失效，没找到原因，低于该版本都没发现问题；

明天计划的事情：

后台总结；

遇到的问题：暂无

收获：

如上