Angular+Bootstrap神奇小弹窗功能

好久没写博客了，可能是我懒了，emmm。。。
前几天接到了一个新的需求，其中有一个弹窗挺有意思的，来这里跟大家分享一下。如果Vue的话可能直接很多框架中都是写好的，我们的框架呢是一个比较老的Angular2.几的+Bootstrap的框架。说实话呢。我对这个了解也不是特别深。闲话少叙，来看看这个有意思的小弹框功能。
需求是这样的

我们主要关注这个详情，需求是这样的意思：
1）当文本框中的文字超过3个时候，显示*…详情*，这个详情可能在这个页面多次出现，
2）当点击详情时候弹出框提示除了这3个地方之外区域名称
3）点击其他位置或者点击另一个详情的时候，取消这个弹框显示，如果是点击另一个详情，在另一个详情上方显示2）的意思。
这个需求呢？其实没啥。直接找一个组件一添加显示不就行了么（天真了，这个里边并没有这个样式和功能的弹框），被迫自己写吧。

上代码然后简单说一下我的思路

<div class="modal fade" id="delreason1" tabindex="-1" role="dialog" data-backdrop="static" ng-click="hidetriangle()">
    <div class="modal-dialog" role="document" style="width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" >×</button>
                <h4 class="modal-title" id="myModalLabel_update" style="text-align: center">上架中介管理</h4>
            </div>
            <div class="modal-body">               
                <fieldset>
                    <div class="ibox-content track-fieldset-top">
                        <div style="overflow-y:scroll">
                            <table class=" table-striped table tablee">
                                <thead>
                                <tr>
                                    <th class="wid100">中介总公司名称</th>
                                    <th class="wid100">业务区域</th>
                                    <th class="wid100">中介总公司编码</th>
                                    <th class="wid100">机构授权</th>
                                    <th class="wid100">协议状态</th>
                                    <th class="wid100">操作</th>
                                </tr>
                                </thead>
                                <tbody class="scrollstyle">
                                    <!-- ng-repeat="propo in list" -->
                                    <tr ng-repeat="propo in selectEditList1">
                                        <td class="wid100 text_center">{{propo.PARTNERNAME}}</td>
                                        <td class="wid100 text_center positionRelative">
                                            {{getAreaname(propo.AREANAME,index)}}
                                            <span class="positionAbsolute" ng-class="'tri'+[$index]" ng-mouseover="mouseover()" ng-mouseout="mouseout()">
                                                <span ng-click="triangleShow(propo.AREANAME,$index)" ng-if="tri"+$index>...详情</span>
                                                //弹框部分 <div class="positionAbsolute" style="left:-76px;">
                                                 //   <div class="triangleBox">
                                                  //      <div ng-click="triangleHide()" class="close1">×</div>
                                                  //      <div class="triangleitem">
                                                  //          <div ng-repeat="triangle in triangleList">{{triangle.code}}</div>
                                                   //     </div>
                                                 //   </div>
                                                  //  <div class="triangle-down"></div>
                                               // </div>   弹框部分
                                            </span>
                                            <span style="visibility:hidden;" ng-if="tri"+index>...详情</span>
                                        </td>
                                        <td class="wid100 text_center">{{propo.COMPANY_CODE}}</td>
                                        <td class="wid100 text_center">{{propo.ORGEMPOWER}}</td>
                                        <td class="wid100 text_center">{{propo.AGREEMENTSTATUS}}</td>
                                        <td class="wid100 text_center">
                                            <a class="btn btn-link btn-xs ng-binding ng-scope" ng-click="accreditDetials(propo,0)">授权管理</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <tfoot>
                        <tr>
                            <td colspan="90%">
                                <uib-pagination total-items="bigTotalItems2" ng-model="bigCurrentPage2" max-size="maxSize2" items-per-page="maxPage2"
                                                boundary-link-numbers="true" force-ellipses="true" previous-text="<" next-text=">" ng-change="jumpToPage2()"
                                                class="pull-right">
                                </uib-pagination>
                            </td>
                        </tr>
                        </tfoot>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    //css
    /* 三角箭头 */
 <style>
    .triangle-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #000;
    position: absolute;
    top: -8px;
    right: 6px;
	}
	.positionAbsolute{
	    position: absolute;
	}
	.triangleBox{
	    position: absolute;
	    width: 80px;
	    height: 100px;
	    background: #000;
	    color: #fff;
	    border-radius: 5px;
	    top: -108px;
	    right: -30px;
	}
	.close1{
	    text-align: right;
	    margin-right: 9px;
	    cursor: pointer;
	}
	.triangleitem{
	    overflow: auto;
	    height: 100px;
	}
	//优化滚动条样式
	.scrollstyle ::-webkit-scrollbar{width:5px;}
	.scrollstyle ::-webkit-scrollbar-track{background-color:#000;}
	.scrollstyle ::-webkit-scrollbar-thumb{background-color:transparent;}
</style>

上边为html代码块，有一部分是代码注释。我也直接放上去了，方便大家看。注释的部分本来我是直接写上的，然后打算生成多个，然后想在点击时候判断显示用，但是后来呢，由于在写需求中3）点击其他位置或者点击另一个详情的时候，取消这个弹框显示，如果是点击另一个详情，在另一个详情上方显示2）的意思的时候呢，发现如果我这样写会出现更多问题。所以放弃了。将这部分代码写入了js动态生成了。

//详情显示与弹窗动态显示
    $scope.triangleShow = function (areaname,index) {
    //由于我们需要在弹框的时候，判断是否有弹框存在，如果存在我们需要先隐藏弹框然后才能在你所点击的地方显示新的弹框
        if(document.getElementsByClassName('triangleshow')[0] != undefined){
            triangleHide(); 
        }
        //动态创建弹框
        //在这里可能有人会质疑你怎么不用``（模板字符串）拼接呢？多简单。（这里不可以使用不支持，他会将你的模板字符串中的内容变成字符串输出）所以只能动态生成了
        const div = document.createElement('div');
        div.setAttribute('style', ['position:absolute','left:-76px']);
        div.className = 'triangleshow'
        div.onmouseout = function(){
            mouseout();
        }
        div.onmouseover = function(){
            mouseover();
        }
        const div1 = document.createElement('div');
        div1.className ='triangleBox';
        const div2 = document.createElement('div');
        div2.innerHTML = 'x';
        div2.className = 'close1'
        div2.onclick = function(){
            triangleHide()
        }
        const div3 = document.createElement('div');
        div3.className = 'triangleitem'
        const div4 = document.createElement('div');
        div4.className = 'triangle-down'
        //arealist 使我们需要处理的数据，去掉前3个数据，将其与的数据进行显示
        var arealist = [];
        arealist = areaname.split(',');
        for(var i =3;i<arealist.length;i++){
            const div = document.createElement('div');
            div.innerHTML = arealist[i];
            div3.appendChild(div);
        }
        //这里我们没有append div2。这是一个关闭的小按钮（类似于我们弹框中的x号），因为本需求不需要关闭按钮所以去掉了。
        // div1.appendChild(div2)
        div1.appendChild(div3)
        div.appendChild(div1)
        div.appendChild(div4)
        var tri = 'tri'+index;
        document.getElementsByClassName(tri)[0].appendChild(div);
    }
    $scope.mouseplace =true;
    $scope.mouseout = function(){
        $scope.mouseplace =true;
    }
    $scope.mouseover=function (){
        $scope.mouseplace =false;
    }
    //点击其他位置隐藏弹框的方法
    $scope.hidetriangle = function($event){
    //mouseplace 这个字段呢，是我用来判断我点击其他地方的时候，如果鼠标的位置不在弹出框上，隐藏弹框，如果在，隐藏弹框的方法就不会执行
        if($scope.mouseplace && document.getElementsByClassName('triangleshow')[0] != undefined){
            document.getElementsByClassName('triangleshow')[0].parentNode.removeChild(document.getElementsByClassName('triangleshow')[0])
        }
    }
    //隐藏弹框方法
    function triangleHide(index){
       document.getElementsByClassName('triangleshow')[0].parentNode.removeChild(document.getElementsByClassName('triangleshow')[0])
    }
    //本方法为后端返回数据为“西北,内蒙古,华东地区,华南区域,华北区域”这样的字符串。我们需要自己判断是否显示详情
    $scope.getAreaname = function(areaname,index){
        var arealist = [];
        arealist = areaname.split(',');
            if(arealist.length > 3){
                var tri = 'tri'+index;
                $scope.tri = true;
                return arealist[0]+','+arealist[1]+','+arealist[2];
            }else{
                var tri = 'tri'+index;
                $scope.tri = false;
                return areaname;
            }
    }

如果有更好的建议或者方法，欢迎留言☺