在AngularJS

-1

codepen使用jQuery的功能，這是工作的代碼在AngularJS

我有一個工作代碼改變網絡的狀態。但我用jQuery來實現它，現在我正在使用角度應用程序來做同樣的事情。

你能幫我嗎。

下面是角碼我從已有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); 
});

來源

2016-11-22 Bob

我不確定你的問題是什麼。你只是想設置一個類，如果$ scope.online是真的？ –

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>

注意，使用這種方法，初始狀態 '連接...' 沒有被處理。

來源

2016-11-22 19:57:56 JimmyBob

謝謝你的幫助 – Bob

使用ng-class這樣的：

<div id="connection" ng-class="{'connected': online == true}">Online<div></div></div>

這是你的糾正Plunker

希望這是你想要的。

來源

2016-11-22 19:56:12

是的，這是非常接近，但離線如何。它不會像我的那樣變成離線。您能否請幫助謝謝 – Bob

回答

相關問題