Question

我正在将AngularJS用于带有按钮和输入的前端。结合使用Express的NodeJS后端，我想做两件事：

让后端从数据库中获取一些数据并将其显示在输入中。如果可能，甚至在后端发送新数据时甚至更改输入文本。
我正在用两个按钮打开/关闭泵。每当泵打开时，我都希望禁用“打开”按钮，反之亦然。泵的状态也应发送到后端，以实际打开/关闭泵。

这是我目前提供的HTML文件：

<!DOCTYPE html>
<html ng-app="WMSFrontend">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Water Management System</title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">


    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="socket.io.js"></script>
    <script src="app.js"></script>
    <script src="factory.js"></script>
</head>
<body ng-controller="mainController">

    <div id="header">
        <h1>Water Management System</h1>
        </a><img src="img/water.png" class="logo" />
    </div>

    <div id="wrapper">
        <div id="left">
            <div class="form-group form-control-sm input">
                <label for="">Tank 1</label>
                <input type="text" class="form-control" disabled ng-model="tank1">
            </div>
            <div class="form-group form-control-sm input">
                <label for="">Tank 2</label>
                <input type="text" class="form-control" disabled ng-model="tank2">
            </div>
            <div class="form-group form-control-sm input">
                <label for="">User 1</label>
                <input type="text" class="form-control" ng-model="user1" disabled>
            </div>
            <div class="form-group form-control-sm input">
                <label for="">User 2</label>
                <input type="text" class="form-control" ng-model="user2" disabled>
            </div>
        </div><!-- #left -->
        <div id="right">
            <div class="form-group form-control-sm input">
                <label for="">Pump 1</label>
                <br>
                <button id="pump1ON" type="button" class="btn btn-primary" ng-click="enablePump1()" ng-disabled="pump1">
                  On
                </button>
                <button id="pump1OFF" type="button" class="btn btn-primary" ng-click="disablePump1()" ng-disabled="!pump1"=>
                  Off
                </button>
            </div>
        </div><!-- #right -->
    </div>

</body>
</html>

到目前为止，无论何时单击ON或OFF，我都可以让后端知道并禁用右键。但是，每当我刷新页面时，即使泵已经打开，按钮状态也会以启用“打开”按钮的方式重置。因此，我需要从后端获取信息以获取泵的状态，并在用户加载页面时启用/禁用右键。我用socket.io尝试了一下，但是没有用。可能是因为socket.io.on（）是异步的，并且页面在接收到泵的状态之前已经显示。我还发现了ngBind，但不确定是否可以解决我的问题以及在我的情况下如何使用它。

这是控制器：

var logbook = angular.module('WMSFrontend', []);

logbook.controller('mainController', ['$scope', '$http', '$window', 'dataService', function($scope, $http, $window, dataService) {

  $scope.tank1 = "no signal";
  $scope.tank2 = "no signal";
  $scope.user1 = "no signal";
  $scope.user2 = "no signal";

  $scope.pump1 = false;

  var socket = io.connect();

  socket.on('buttonStates', function(data) {
    $scope.pump1 = (data == 'true');
  });

  /**
   * function for buttons of pump 1
   * toggles button and sends state to backend
   */
  $scope.enablePump1 = function() {
    $scope.pump1 = true;
    dataService.togglePump1(true);
  }

  $scope.disablePump1 = function() {
    $scope.pump1 = false;
    dataService.togglePump1(false);
  }

}]);

我的问题是：在页面已加载之前，如何获取泵的状态并管理按钮？除此之外，我还想通过从后端获取数据来显示这些输入中的水箱状态（水位，以％为单位）。

PS：这是我通过前端的快递和工厂在后端接收点击事件的方式：

var express = require('express');
var router = express.Router();

router.get('/api/pump1/:state', function(req, res) {
    global.pump1 = (req.params.state.substring(1) == 'true');
    if(global.pump1) {
        console.log("Pump 1 turned ON");
    } else {
        console.log("Pump 1 turned OFF");
    }
    res.send('ok');
});

AngularJS：在页面加载之前从NodeJS后端获取数据

0 个答案: