最近项目中新增了一个功能，需求是一个下拉列表，但是激活元素是 input 标签，对于 uib-dropdown 指令也不难，只是将 button 换成 input 加上 uib-dropdown-toggle 属性标记即可，这不难。
然而，测试提出了另一个需求，input 框可点击，并且下拉框不闪动，意思就是说点击 input 下拉框不要在展开关闭中切换。这个问题直接就难住我了，因为 uib-dropdown-toggle 属性，会导致点击一次激活属性，就改变一次下拉框的开闭状态。
而还有一种方法，将 auto-close 设置成 disabled ，同时 uib-dropdown 同级属性加上 is-open 属性来自己控制下拉框的开合，这样做是实现了测试的需求，但同时引出了另一个问题：点击外部不会关闭，因为之前 auto-close 设置的是 outsideClick ，点击除下拉框外的元素都将关闭下拉框。
因为时间较急，也没仔细看过这个 outsideClick 的实现原理，于是积极找各种方法，寻求新的插件来实现需求，偶然看到了 select2 插件的对 input 下拉框的查询，它巧妙的将 input 放入了下拉框中，这就不会存在点击 激活元素的事件了，于是跟同事商量，改成了这种下拉 input 的实现，插件并没有改变。
现在功能做完，回想起来这么个事，先想出来个 outsideClick 的实现，以后万一有用呢：
<!DOCTYPE html>
<html ng-app=‘myApp‘>
<head>
<meta charset=‘utf-8‘>
<script src=‘angular.js‘></script>
<script src=‘jquery-1.11.3.js‘></script>
<style>
.div1 {
border: 1px solid #ddd;
width: 200px;
height: 200px;
margin-left: 40%;
margin-top: 100px;
display:inline-block;
overflow-x:scroll;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div ng-controller=‘myCtrl‘>
<div class=‘div1‘ ng-click="eleClickFnc()">ppppppppppppppppppppppppppppppppppp ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</div>
<p>{{message}}</p>
</div>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope, $document){
$scope.message = ‘please click anywhere‘;
$scope.isELeClick = false;
$scope.eleClickFnc = function () {
$scope.isELeClick = true;
$scope.message = ‘ele clicked‘;
console.log(‘ele‘)
}
$document.bind(‘click‘, function () {
if(!$scope.isELeClick) {
$scope.$apply(function () {
$scope.message = ‘body click‘;
})
}
$scope.isELeClick = false;
console.log(‘body‘)
})
})
</script>
</body>
</html>
主要思路就是监听点击事件啦：
1、元素自己的事件，可以通过一个开关来控制；
2、document 的监听，点击元素肯定是先触发的元素事件，这样先改变开关状态，触发到 document 后判断是否点击的是目标元素，再进行相应操作。
遗留个小问题：点击滚动条居然不算是点击目标元素 @[email protected] ?