Bob Bob - 13 days ago 6
AngularJS Question

using jQuery function in AngularJS

codepen this is the working code

I have a working code for changing the status of the network.
But I used jQuery to achieve it and now I am using angular app for the same thing.

Could you please help me.

Below is the Angular Code I have tried from already existing plunker:
Plunker

HTML:

<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hello {{name}}! {{online}}
</body>
</html>


js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});

app.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$rootScope.$apply(function() {
$rootScope.online = false;
});
}, false);
$window.addEventListener("online", function () {
$rootScope.$apply(function() {
$rootScope.online = true;
});
}, false);
});

Answer

http://plnkr.co/edit/C2oJAYtEbb2lMixY2rVa?p=preview

  <div id="connection" ng-class="{'connected': online, 'disconnected': !online}">
    <span ng-if="$root.online">Online<div></div></span>
    <span ng-if="!$root.online">Offline<div></div></span>
  </div>

Note that with this approach, the initial state of 'connecting...' is not handled.

Comments