Angular two way binding not working

Question

I'm very new to angularjs and I want to establish a connection to my server and dynamically show the result to user. so far I've tried:

angular.module('myApp.controllers', []).controller('socketsController', function($scope) {

  $scope.socket = {
    client: null,
    stomp: null
  };

  $scope.reconnect = function() {
    setTimeout($scope.initSockets, 10000);
  };

  $scope.notify = function(message) {
    $scope.result = message.body;
  };

  $scope.initSockets = function() {
    $scope.socket.client = new SockJS('/resources');
    $scope.socket.stomp = Stomp.over($scope.socket.client);
    $scope.socket.stomp.connect({}, function() {
      $scope.socket.stomp.subscribe('/user/topic/messages', $scope.notify);
    });
    $scope.socket.client.onclose = $scope.reconnect;
  };
  $scope.initSockets();
});

But when I use {{result}} nothing appears.

UPDATE The server response is totally right with console.log(message.body).

I don't really understand how your code works, but you didn't provide any parameter when you called $scope.notify. — Mistalis
– Mistalis, Commented Jan 25, 2017 at 13:15
try like this $scope.notify = function(message){$scope.$apply(function(){$scope.result = message.body})}; — MMK
– MMK, Commented Jan 25, 2017 at 13:21

Bala Abhinav · Accepted Answer · 2017-01-25 13:15:55Z

1

I guess, the callback is not taking the scope properly. Try call $scope.$apply(); after you attach the message.body to result :

$scope.notify = function(message) {
    $scope.result = message.body;
    $scope.$apply();
  };

$scope.$apply() triggers an angular digest cycle whcih will update all the bindings..

answered Jan 25, 2017 at 13:15

Bala Abhinav

1,3481 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Khoda Over a year ago

Thanks. very helpful.

Bala Abhinav Over a year ago

my pleasure :-)

Vikash Kumar · Accepted Answer · 2017-01-25 13:16:47Z

1

Call it inside a timeout function but inject $timeout first it will call the digest cycle and update the value.

$timeout(function(){
$scope.result = message.body;});

answered Jan 25, 2017 at 13:16

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular two way binding not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related