angular 实现 下拉菜单 的 点击其他区域关闭下拉菜单功能?

代码如图, 点击 div.selected 的时候 ul.dorpdown-list 就会显示 点击 li 的时候 ul收起 并且 赋值给selectedVal

现在还有个需求是 点击dorpDown 指令外的部分 要收起 ul.dorpdown-list

怎么办呢?

其实你只要写select就可以达到你的目标

<select ng-model=”selected”>
<option></option>
</select>

简单的方法,直接写一个div包含你要的下拉列表,加个遮罩就可以了,遮罩部分加ng-click事件让下拉的div隐藏。div中ng-repeat循环选项,选项的ng-click事件来确定你选择的数据(传所选对象,不要传$index)。这个东西没必要写指令,如果需要多次重用,再写指令。

绑定页面单击事件,关闭下拉菜单功能,举个列子

//html---------------
<div ng-controller="ctrl">
    <input type="button" value="点击" ng-click="showListClick($event)"/>
    <ul ng-show="showFlag" style="display: none;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

//script------------------------
myApp.controller('ctrl', function( $scope,$document ){
    
    $scope.showFlag=false;
    $scope.showListClick=function($event){
        $event.stopPropagation();
        $scope.showFlag=true;
    }
    
    //绑定页面单击事件,关闭下拉菜单功能
    $document.bind("click", function(event) {
        $scope.showFlag=false;
        $scope.$apply();             
     }); 
});

在你的指令里面写一个函数 监听一个事件 外面写一个documentclick的方法,执行的时候执行这个方法 影藏掉,点击自己的时候阻止冒泡

  • JS这样获取元素为什么会报错?
  • 有没有一个js日历插件可以显示当月日期并自定义特殊日期高亮?
  • js中一条竖杠是什么意思
  • 类似bootstrap这种js或者css引入用cdn好呢还是下载到本地好呢?
  • Pluload结合PHP 上传视频
  • nodejs 如何引入 promise才能尽量少改原有代码?
  • Js中的!!的问题
  • select点击事件动态添加option不能显示,怎么解决?
  • 域名无法解析Get net::ERR_NAME_NOT_RESOLVED
  • 为什么部署到服务器bootstrat框架有些样式加载不出来?
  • 请问,这个方法(递归)为什么会导致内存溢出?