AngularJs асинхронная привязка данных

Question

Я очень новичок в AngularJs, и у меня есть простой вопрос. Я хочу поставить имя. Но сначала это имя имеет одно значение, но после 0,3-0,5 сек оно имеет другое значение. Я не знаю, как связать его, что значение может измениться.

HTML код:

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

Угловая контроллер:

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; 
    }; 

Я использую протокол Stomp, это дает мне данные не сразу, потому что он должен отправить запрос на сервер и получить его обратно , это займет время. Я попытался отлаживать после того, как переменная запроса $ scope.tasks [0] .form.name изменилась с неопределенного на «Учреждение», но на экране неопределенные остается, как связать переменную, чтобы изменить значение динамически. Спасибо за помощь заранее!

ОБНОВЛЕНИЕ Проблема решена, мне просто пришлось использовать функцию $ scope.apply (...). Код здесь:

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; 
    }; 

Спасибо за помощь!

Answer 1

Скорее всего, обратный вызов подписки не вызывается в угловом контексте. Попробуйте обернуть код обратного вызова в $scope.$apply и посмотреть, если он работает

$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); 
     }); 
    }); 
    }); 

Answer 2

Я считаю, метод, который вы звоните возвращает неопределенное, потому что он не имеет никаких данных. Другими словами: дать ему начальное значение, и она должна работать

Я бы переписать его:

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

И

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

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

Или, если вы хотите сохранить его в тока образом: App.controller ('FormController', [ '$ Объем', '$ HTTP', функция ($ Объем, $ HTTP) {

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

или

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

Я надеюсь, что это помогает