AngularJs的UI组件ui-Bootstrap实现Popover功能

文章目的：

      使用AngularJs的UI组件，显示Popover，Popover的触发事件为自定义事件，主要是触发显示前需要添加一些校验逻辑，未使用默认的trigger（主要是对AngularJs不熟~~~trigger是什么？），关于触发事件可参见如下：

popover-trigger支持的显示提示框和隐藏提示框的事件有：

mouseenter: mouseleave
click: click
outsideClick: outsideClick
focus: blur
none

使用时只需要设置显示提示框的事件就可以了(隐藏提示框的事件会自动设置)。

设置为click时，在元素上单击一次会显示提示框，再单击一次隐藏提示框。

设置为outsideClick时，在元素上单击一次会显示提示框，在元素之外的其他地方单击一次会隐藏提示框。

设置为none时，可以和popover-is-open属性配合使用，自己控制提示框显示和隐藏的时机。

参考文章如下：

http://www.cnblogs.com/pilixiami/p/5661600.html

正文如下：

定义触发的按钮：

<button id="btn_popover" uib-popover-template="'myTooltipTemplate.html'" 
    popover-title="标签分类" popover-placement="bottom" popover-trigger="'none'" 
    popover-is-open="popoverIsOpen" ng-click="triggerPopover($event)">
    <i class="fa fa-plus-circle"></i>标签管理
</button>
<script type="text/ng-template" id="myTooltipTemplate.html" >
    <div id="tipContainer" style="width: 160px; height: auto;">
        <span>我是popover</span>
    </div>
</script>

 

注意：

popover-trigger = "'none'"  popover-is-open="popoverIsOpen" ng-click="triggerPopover($event)"这三个属性

popover-trigger设置为none表示不采用默认触发事件，既可以按照我们自己的逻辑进行触发判断；

popover-is-open设置绑定一个bool变量，直接设置true和false不起效，可参看git网站的提问

https://github.com/angular-ui/bootstrap/issues/5773

然后就是设置click绑定事件，如果不是点击按钮触发的事件我也没试过~~~

js逻辑如下：

    //设置popover默认为不显示
    $scope.popoverIsOpen = false;
    //按钮点击事件
    $scope.triggerPopover = function($event){
        //阻止事件冒泡
        $event.stopPropagation();
        //当popover显示时，切换为隐藏
        if($scope.popoverIsOpen){
            $scope.popoverIsOpen = false;
        }else{//当popover隐藏时，切换为显示，同时添加逻辑判断
            //例如获取id的值，判断值为Y时才显示
            var v = $("#id").val();
            if(v ！= "Y"){
                alert("不满足条件！");
                return;
            }
            $scope.popoverIsOpen = true;
        }
    };

这样点击按钮可以实现popover的显示和隐藏，但是我们不需要每次都点击按钮才隐藏popover框啊~~

所以又添加了如下逻辑：

//body元素里面点击事件
angular.element("body").bind("click",function($event){
    //判断点击的元素是不是popover内的元素
    if($($event.target).closest("#tipContainer").length == 0 ){
        if($scope.popoverIsOpen) {
            //触发click事件
            angular.element("#btn_popover").click();
        }
    }
});