2.css代码控制

.content .list{
    display: block;
}  
.content.open .list{
    display: block;
}  

3.mock静态数据

vm.list = [
    {title: '下拉选项1'},
    {title: '下拉选项2'},
    {title: '下拉选项3'},
    {title: '下拉选项4'},
    {title: '下拉选项5'}
];

4.点击按钮控制显示隐藏，我只需要控制open状态为true或false即可。

// 设置初始状态为不显示
vm.open = false;
// 显示,关闭浮层
vm.toggle = function() {
    vm.open = !vm.open;
};  

5.点击任一下拉选择，隐藏。

vm.itemClick = function() {
    vm.ticketOpen = false;
};

6.点击空白处，隐藏。

$document.off('click').on('click', function() {
    vm.open = false;
});

看到这样的代码，你觉得有问题吗？反正我当时觉得自己一定是对的，但调试结果就是不生效，下拉怎么都不会隐藏。
通过断点调试，页面输出open的值，发现js中的open确实已经发生改变，但是页面的值确没有改变，然后联想到双向数据绑定失效。

谁决定什么事件进入angular context,而哪些又不进入呢？$apply!

这里声明一点ng-click不需要单独去做处理是因为angular已经做了，因此点击带有ng-click的元素时，事件就会被封装到一个$apply调用。

所以上面的问题也显而易见，是因为没有调用$apply,事件没有进入angular context, $digest循环永远没有执行。
so将code修为：

$document.off('click').on('click', function() {
    vm.open = false;
    $scope.$apply();
});

这样一测，立马有用了。
$apply是$scope的一个函数，调用它会强制一次$digest循环.
然后看到网上有人说有种更好用的办法，尝试了一下确实有效：

$document.off('click').on('click', function() {
    $scope.$apply(function () {
        vm.open = false;
    });
});

解释为：

What’s the difference?
The difference is that in the First version, we are updating the values outside the angular context so if that throws an error, Angular will never know.
Obviously in this tiny toy example it won’t make much difference,
but imagine that we have an alert box to show errors to our users and we have a 3rd party library that does a network call and it fails.
If we don’t wrap it inside an $apply, Angular will never know about the failure and the alert box won’t be there.

参考文章地址： http://angular-tips.com/blog/...