如何使用AngularJS在点击身体内部任何位置时显示弹出窗口

How do I show pop up on clicking anywhere inside body using AngularJS?

本文关键字：位置 任何 显示 窗口 内部 AngularJS 何使用      更新时间：2023-09-26

如果互联网可用，我必须在点击页面正文的任何位置时显示一条弹出消息以显示网络连接。使用JavaScript，我们可以使用addeventlister来完成，如下所示。

但是我该如何做到这一点呢？

document.body.addEventListener("click", function(){
   alert("hello");
});

在AngularJS中执行此操作的一种方法是使用ng-click指令。基本上，您将警报和网络状态检查代码封装在页面控制器中的scope方法中。

app.controller('mainCtrl', function($scope) {
  $scope.message = 'Click the button';
  $scope.showMessage = function() {
    // Simple example that doesn't check network status or
    // display anything of real value other than verifying
    // that a click anywhere on the page will invoke this method
    alert('hello');
  }
});

完成后，您将把ng-click="showMessage"指令放在希望事件侦听器附加到的元素上。在本例中，我使用了整个主体。

  <body ng-controller="mainCtrl" ng-click="showMessage()">
    <h1>Hello Plunker!</h1>
    <p>Click anywhere</p>
  </body>

这是一个基本的plunk，来测试一下。

这就是您在AngularJS:中的操作方法

index.html

<!DOCTYPE html>
<html ng-app ="myApp">
    <head>
        <title>Angular</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body ng-controller="myCtrl">
    </body>
</html>

script.js

angular.module("myApp",[])
.controller('myCtrl', ['$scope', function($scope){
    document.addEventListener("click",function(){
        alert("Hello");
    });
}])

这是plnkr。点击页面上的任何位置，您都会看到alert弹出。

相关文章：