首页 文章

Angular-js $ scope变量未在视图中更新

提问于
浏览 次
-1

我是angular-js的新手并且构建了一个简单的待办事项应用程序 . 我正在创建一个任务，并使用ng-repeat在html表中显示创建的任务 . 但问题是在发布数据后，$ 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>
angularjs angularjs-http

2 回答

  • 0

    我想你不会在任何时候调用_refreshEmployeeData . 如果在JS中添加_而不是_refreshTaskData，那么您将能够在视图中看到结果 .

    另外请使用ng-init来调用控制器中的_refreshEmployeeData . 这将是初始化字段的最佳方式 .

    回复于
  • -2

    您必须了解这些JS框架是异步的 . 现在发生的情况是，如果您执行API调用并进行另一个API调用，其结果基于第一个调用，则控制台不会等待来自一个API的结果并直接向前移动 . 所以在你的情况下发生的事情有时/很多次，在提供POST调用之前，控制器无法及时获得GET的新数据，因此不会更新视图 . 您可以做的是仅在提供POST时强制执行GET

    $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呼叫之前进行检查，那将是最好的

    回复于

相关问题