Невозможно привязать данные с фабрики AngularJS
Я новичок с AngularJS, и взять пример webSocket в качестве основы для моего приложения https://github.com/AngularClass/angular-websocket/tree/master/example Приложение должно принимать данные jSon из webSocket и заполнять пользовательский интерфейс. Пример содержит фабрику с переменной colection, и привязка дает результат на HTML-шаблоне, но когда я добавляю переменную searchStatus, я не вижу ее автоматического обновления (привязки) на UI. Почему?
<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));
}
}
};
});
Спасибо!
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 }}