Как показать всплывающее окно при нажатии в любом месте внутри тела с помощью AngularJS?

Question

Как показать всплывающее окно при нажатии в любом месте внутри тела с помощью AngularJS?

0

Я должен показать всплывающее сообщение, чтобы отображать сетевое соединение по щелчку в любом месте на теле страницы, если доступен Интернет. Используя JavaScript, мы можем сделать это, используя addeventlister, как показано ниже.

Но как мне это достичь?

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

dps235 15 май 2016, в 08:49

Источник

Теги:

javascript

jquery

html

angularjs

2 ответа

0

Так вы делаете это в 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.

Wild Widow 15 май 2016, в 05:44

Ещё вопросы

10BitDev · Accepted Answer · 2016-05-15T03-53-00.000Z

Один из способов сделать это в AngularJS - с директивой ng-click. В основном, вы инкапсулируете код проверки вашего состояния и проверки состояния сети в методе области видимости в контроллере страницы.

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>

Вот базовый планшет, чтобы проверить его.