[成都|荣耀师兄]JS-郑明月|2017年02月23日的日报-技能树.IT修真院

发表于： 2017-02-23 23:13:57

1 1232

一、今天完成的事情：

1.熟悉了rem、em是啥东西，啥时候该用啥；

2.了解到了ng-checked方法，用来做公司福利选项；

3.将模态框封装成了指令，实现了复用；

4.完成了上下线、删除职位的功能；

二、明天要做的事情：

1.彻底完成工作添加、工作编辑；

三、今天遇到的问题：

模态框的指令制作流程：

这里我们说的是基于btui模态框的指令复用性：

1.模态框有一个自己的服务，$uibModle，在这个东西下面有一个open属性，这个属性是一个对象，下面储存了键值对，它有以下几个东西：

animation	是否有动画效果，true表示有
templateUrl	模板位置
controller	模板使用的controller是哪一个（每个模板都会有controller）
size	模态框的大小，默认md，对应bt栅格的大小，但是需要这样添加 modal-lg
resolve	传入模态框controller中的数据，用于页面渲染和数据操作
result	回调函数，触发close之后可以获取到里面的数据，并执行里面的方法
keyboard	布尔值，默认为true，可以通过键盘esc关闭模态框
opened class	打开时加到body上的class属性
windowclass	会附加一个class到打开的模板上面

2.在模态框的controller中，首先要注入$uibModalInstance，这是它模态框专用的依赖，还有上面resolve中传入的数据也需要注入，在$uibModalInstance有几个属性：

close	点击正常关闭后触发的事件，可以将值传入$uibModle的result中，需要这样存值$value:xx
dismiss	非正常关闭触发的事件

暂时我只了解了以上这么多东西，更多的属性请参考btui官网。

3.思路：项目中要求点击的时候弹出模板，里面有确认和取消两个按钮，当选择成功之后会弹出第二个模态框，提示操作成功。

首先，我们在指令中给ele绑定了点击事件，当点击的时候会触发我页面中获取各种参数的函数，传入各种数据，在这里有个坑，如果用=来绑定指令和controller中的参数的话，参数的传递会有延迟，解决的方法有两个，第一个是将controller中函数你需要的数据最后return出来，在指令中通过"&"绑定，直接将你要传递给指令controller中的值等于这个函数就能解决，我现在也是用的这个方法，还有一个方法就是只用服务来解决，取值的时候取出来存入服务中，取出的时候再从服务中取出，直接使用。用第二种方法需要在两边都把服务都注入，略麻烦。

然后，我们将值传入模态controller中让它渲染页面，因为我这里要显示两个页面，我传入了一个值，来判定我这是第几个页面，第一个页面默认是没有值，第二个是有值，它会根据这个值来渲染页面，下面贴代码：

.directive('useModal',function ($uibModal) {
    return {
        restrict:"A",
        replace:false,
        scope:{
            /*点击确认后执行的函数*/
            ctrFn: '&',
            /*获取各种数据的函数*/
            ctrclick:'&',
            /*是否要显示第二段弹出框，没有默认会弹出第二段*/
            modalTwice:"@",
            /*第一次是否有确认按钮，没有就默认弹出会有*/
            okChoose:"@",

        },
        //scope.modaldata中对应三个参数，首先第一个模板默认显示两行，第一行是tilte，第二行是content。第二个模板默认只显示一行，success并且只有一个取消按钮
        link:function (scope,ele) {
            /*给属性添加一个点击事件*/
            ele.bind("click",function () {
                /*执行我那边传入值的函数*/
                scope.modaldata=scope.ctrclick();
                scope.openModle();
            });
            scope.openModle = function (size,num) {
                /*打开模态框的过程*/
                var modalInstance = $uibModal.open({
                    animation: true,
                    templateUrl: 'tpls/modaltpls/test.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写
                    controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的
                    size: size,//模态框的大小尺寸
                    resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中
                        items: function () {//items是一个回调函数,我这里需要让它在外部获取到
                            scope.modaldata.num = num?1:false
                            scope.modaldata.okChoose = scope.okChoose?2:1;
                            return scope.modaldata;//这个值会被模态框的控制器获取到
                        }
                    }
                });
                modalInstance.result.then(function () {
                    scope.ctrFn();
                    scope.modalTwice?false:scope.openModle(size,1)
                })
            }
        }
    }
})

为了复用性，我加入了两个参数，这两个参数能够控制我页面如何渲染，但是还存在着一个小bug，我不管操作是成功还是失败，都会弹出成功的框，因为这边第二个框是直接调用，并不是在上一个的then.中调用

关于rem和em的思考：

1.首先，你要知道em这个表示宽度，是通过使用em的这个元素的font-size来确定，我们都知道，font-size属性是可以继承的，比如你父元素设置的10px，你给父元素下的一个元素设置0.5em这个元素就变成了5px。但是这种继承的情况会在它有多个层级的时候变得特别复杂，来一个小demo

<div style="font-size: 20px">我是父级元素
   <div style="font-size: 2em">我是子元素，我的字体大小是20*2=40px
<div style="font-size: 2em">我是子元素下的元素，我的字体大小是40*2=80</div>
   </div></div>