Question

我正在开发离子移动应用程序;当我点击一个单词时，它的描述会弹出，如下所示。

我想要做的是每当我滑动文本或点击页面上的任何位置时关闭弹出窗口。这在AngularJs中是否可行？如果是的话，我该怎么用？谢谢。

Answer 1

在弹出窗口后面有一个不可见的全屏图层，点击它可以隐藏描述以及隐藏图层并显示休息。

查看此codepen：https://codepen.io/anon/pen/yOpXQw

HTML

<html>
  <body ng-app>
    <div id="main" ng-app ng-controller="appController">
            <input type="button" ng-value="value1"  />
            <div id="invisible" ng-click="click()" ng-hide="hide">  </div>
    <input type="button" ng-value="value" ng-hide="hide" />


</div>

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>    
  </body>
</html>

CSS

*{
    margin:0;
    padding:0;
}

body{
    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;
    text-align:center;
}

#main{
    height:1000px;
    position:relative;
    padding-top: 0px;
}
input
{
    margin-top:100px;
    padding-top: 50px;
    position:absolute;
}
#invisible
{
    height:100%;
    width:100%;
    position:absolute;
}

JS

function appController($scope){
    $scope.value = 'Some Value from Scope';
    $scope.value1 = 'another Value from Scope';
    $scope.click = function()
    {
        $scope.hide=true;
        alert("outside was clicked");
    }
}

触发触摸事件angularjs后关闭窗口

1 个答案: