dps235 dps235 - 6 months ago 30
HTML Question

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

I have to show a popup message to display the network connection on click of anywhere in the body of page if Internet is available. Using JavaScript, we can do it by using addeventlister like below.

But how do I achieve this?



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




Answer

One way to do this in AngularJS is with the ng-click directive. Basically, you encapsulate your alert and network status checking code in a scope method in the page's controller.

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');
  }
});

Once this is done, you will place the ng-click="showMessage" directive on the element that you want the event listener attached to. In this example, I use the entire body.

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

Here is a basic plunk, to test it out.

Comments