Переменная Angular-js $ scope не обновляется в представлении - PullRequest
Новая
       23

Переменная Angular-js $ scope не обновляется в представлении

0 голосов
/ 10 декабря 2018

Я новичок в angular-js и создаю простое приложение.Я создаю задачу и отображаю созданную задачу в HTML-таблице с помощью ng-repeat.Но проблема в том, что после публикации данных переменная $ scope.tasks обновляется на стороне контроллера, но не отображается.Представление обновляется только после обновления веб-страницы, и задача добавляется в таблицу HTML.Как я могу сделать вид обновления после создания задачи.Заранее спасибо.Вот мой код:

В моем контроллере: 

var app = angular.module('MyApp', ['ngMaterial', 'ngMessages']);
app.controller('DemoCtrl', function($scope,$mdSidenav,$mdDialog,$interval,$http,$mdToast) {
     $scope.tasks = []; 
   _refreshTaskData();  //initial refresh

  $scope.submitForm = function() {

        var description = "";
        var taskId = "";

        $scope.formData = {
                taskId: $scope.taskId,
                description: $scope.description,
         };

        $http({
            method: "POST",
            url: 'savetask',
            data:  angular.toJson($scope.formData),
            headers : {
                'Content-Type': 'application/json',
            }
        }).then(_success, _error);
      };

    function  _refreshTaskData() {
        $http({
                method : 'GET',
                url : 'getTask',

            }).then(function(res) { // success
                $scope.tasks = res.data;
            }, function(res) { // error
                console.log("Error: " + res.status + " : " + res.data);
            });
    }

    function _success(res) {
         $mdDialog.hide();
         console.log('in success function');
        _refreshTaskData(); ;
    }

    function _error(res) {
           //error handling
     }
});

На мой взгляд: 

<table>
   <tr ng-repeat=" t in tasks">
      <td>{{t.id}}</td>
      <td>{{t.description}}</td>
   </tr>
</table>

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Вы должны понимать, что эти платформы JS являются асинхронными.Теперь, что происходит, если вы делаете вызов API и делаете другой вызов API, результат которого основан на первом, консоль не ожидает результата от одного API и напрямую продвигается вперед.ТАК, что в вашем случае происходит иногда / много раз, до того, как будет обработан вызов POST, контроллер не сможет вовремя получить свежие данные с помощью GET, таким образом, не обновляя представление.То, что вы можете сделать, это применить GET только тогда, когда POST обслуживается 

$http({
        method: "POST",
        url: 'savetask',
        data:  angular.toJson($scope.formData),
        headers : {
            'Content-Type': 'application/json',
        }
    }).then(function(res){
         $http({
            method : 'GET',
            url : 'getTask',

        }).then(function(res) { // success
            $scope.tasks = res.data;
        }, function(err) { // error
            console.log("Error: " + err.status + " : " + err.data);
        });
    });

Было бы лучше, если вы отправляете сообщение об успешном завершении из бэкэнда и проверяете перед вызовом GET

0 голосов
/ 10 декабря 2018

Я думаю, что вы не вызываете _refreshEmployeeData в любой момент времени.Если вы добавите это вместо _refreshTaskData в JS, вы сможете увидеть результат в просмотре.

Также любезно используйте ng-init для вызова _refreshEmployeeData в контроллере.Это был бы лучший способ инициализировать поля.

...