AngularJs asynchronous data binding

Question

I'm very new to AngularJs and I have simple question. I want to put the name. But this name has one value at first but after 0.3-0.5 sec it have other value. I don't know how to bind it, that the value could change.

HTML code:

<div ng-controller="FormController">
    <h2 >
        {{getName()}}<br>
        <span class="icon-f-gear"></span>
        <small>Procesas</small>
    </h2>
</div>

Angular controller:

var App = angular.module('form', ['ui.bootstrap']);

App.controller('FormController', ['$scope' ,'$http', function($scope, $http) {

    $scope.tasks = [];
    $scope.socket.stomp.subscribe("/app/tasks", function (message) {
        if ($scope.tasks.length !=0){
            $scope.tasks.removeAll();
        }
        JSON.parse(message.body).forEach(function (el) {
            $scope.tasks.push(el);
        });
    });
    $scope.getName = function(){
        return $scope.tasks[0].form.name;
    };

I'm using Stomp protocol, it gives me data not instantly, because it has to send request to server and get it back, it takes time. I tried to debug after the request variable $scope.tasks[0].form.name changes from undefined to "Institution", but in the screen undefined stays, how to bind variable to change the value dinamically. Thanks for help in advance!

UPDATE Problem solved, I just had to use $scope.apply(...) function. Code here:

var App = angular.module('form', ['ui.bootstrap']);

App.controller('FormController', ['$scope' ,'$http', function($scope, $http) {

    $scope.tasks = [];
    $scope.socket.stomp.subscribe("/app/tasks", function (message) {
        if ($scope.tasks.length !=0){
            $scope.tasks.removeAll();
        }
        JSON.parse(message.body).forEach(function (el) {
            $scope.tasks.push(el);
        });
        $scope.apply(function(){$scope.tasks});
    });
    $scope.getName = function(){
        return $scope.tasks[0].form.name;
    };

Thanks for help!

Chandermani · Accepted Answer · 2014-09-11 13:11:43Z

3

Most probably the subscribe callback is not being called in angular context. Try to wrap the callback code in $scope.$apply and see if it works

 $scope.socket.stomp.subscribe("/app/tasks", function (message) {
     $scope.$apply(function() {
        if ($scope.tasks.length !=0){
            $scope.tasks.removeAll();
        }
        JSON.parse(message.body).forEach(function (el) {
            $scope.tasks.push(el);
        });
     });
    });

answered Sep 11, 2014 at 13:11

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

1 Comment

Egizeris Over a year ago

Thank you very much! I used this $scope.apply(...) function and everything works just fine. Although I used it just on the variable: $scope.$apply(function() {$scope.tasks};

BramSlob · Accepted Answer · 2014-09-11 13:14:19Z

0

I believe the method you are calling returns undefined, because it has no data. In other words: give it an initial value, and it should work

I would rewrite it to:

<div ng-controller="FormController">
    <h2>
        {{formName}}<br>
        <span class="icon-f-gear"></span>
        <small>Procesas</small>
    </h2>
</div>

And

App.controller('FormController', ['$scope' ,'$http', function($scope, $http) { 

$scope.formName = '';
--- rest of code

Or, if you wish to keep it in the current way: App.controller('FormController', ['$scope' ,'$http', function($scope, $http) {

$scope.tasks = [];
$scope.tasks[0].form.name = '';

or

$scope.getName = function(){
    return ($scope.tasks.length > 0) ? $scope.tasks[0].form.name : '';
};

I hope this helps

answered Sep 11, 2014 at 13:14

BramSlob

111 bronze badge

1 Comment

Egizeris Over a year ago

Thanks for your time, but i tried this earlier too, it didn't change model, earlier answer suggestion to use $scope.apply(...) worked as a charm.

Collectives™ on Stack Overflow

AngularJs asynchronous data binding

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related