Question

我是AngularJS的新手，并将webSocket示例作为我的应用程序https://github.com/AngularClass/angular-websocket/tree/master/example的基础应用程序应从webSocket获取jSon数据并填充UI。示例包含带有colection变量的factory，并且绑定在HTML模板上给出结果，但是当我添加searchStatus变量时，我无法在UI上看到它的自动更新（Binding）。为什么呢？

    <div ng-app="portScanner">
        <h2>Port scanner</h2>

        <div ng-controller="SimplePortScannerController">

            Status : {{ searchStatus }}

            <form ng-submit="submit(address)">
                <input type="text" ng-model="address" autofocus required>
                <button type="submit">Check ports</button>
            </form>

        {{sum}}<br>

        <div ng-repeat="message in Messages.collection | orderBy:'-timeStamp' track by $index">
            <!--{{message.statusString}}-->
            {{message}}
            <br>
        </div>

        </div>
    </div>

Java脚本代码

var angularApp = angular.module("portScanner", ['ngWebSocket']);

angularApp.controller('SimplePortScannerController', function ($scope, Messages) {
    $scope.sum = 0;
    if ($scope.address==null){
        $scope.address = "192.168.0.1";
    }
    $scope.Messages = Messages;
    $scope.submit = function (address_message) {
        if (!address_message) {
            return;
        };
        Messages.send({
            address : address_message
        });
        $scope.sum = $scope.sum + 1;
    };
});

angularApp.factory('Messages', function ($websocket) {
    var ws = $websocket('ws://localhost:8080/portscanner2/scanner');
    var collection = [];
    var searchStatus;

    ws.onMessage(function (event) {
        console.log('message: ', event);

        messageJson = angular.fromJson(event.data);
        if (messageJson.statusString){
            searchStatus = messageJson.statusString;
        }

        collection.push(angular.fromJson(event.data));
    });

    ws.onError(function (event) {
        console.log('connection Error', event);
    });

    ws.onClose(function (event) {
        console.log('connection closed', event);
    });

    ws.onOpen(function () {
        console.log('connection open');
    });

    // setTimeout(function () {
    //  ws.close();
    // }, 300000)

    return {
        collection: collection,
        searchStatus: searchStatus,
        // status : function () {
            // return ws.readyState;
        // },
        send : function (message) {

            if (angular.isString(message)) {
                ws.send(message);
            } else if (angular.isObject(message)) {
                ws.send(JSON.stringify(message));
            }
        }

    };
});

谢谢！

Answer 1

由于返回对象中的searchStatus: searchStatus在执行searchStatus = messageJson.statusString;时会丢失其引用，因此undefined中的Messages始终为var ws = $websocket('ws://localhost:8080/portscanner2/scanner'), obj = { collection: [], searchStatus: null, send: function(message) { /* no change here */ } }; ws.onMessage(function (event) { console.log('message: ', event); messageJson = angular.fromJson(event.data); if (messageJson.statusString){ obj.searchStatus = messageJson.statusString; } obj.collection.push(angular.fromJson(event.data)); }); // etc return obj;。

简单地创建工厂的返回对象并更新它而不是单个变量。例如

Status : {{ Messages.searchStatus }}

此外，您的模板应该

object BatQuantity= pi[3].GetValue(SystemInformation.PowerStatus, null);

//convert the value I get from PowerStatus class to %
float num = (Single.Parse(CantdeBat.ToString())) * 100;

//shows battery % and if battery is full says it's full if not it says it's low
string batteryStatus = num.ToString() + "%";
if (num == 100)
{
    batteryStatus = "-Full Battery-";
}
else if (num <= 25)
{           
    batteryStatust = "-Low Battery-";
}            
label4.Text = batteryStatust;

无法绑定AngularJS工厂的数据

1 个答案: