Angularjs 确保在不重新加载页面的情况下更新列表

我有一个角度表，应该随时更新有人通过表单添加项目。有时它会立即显示项目，但有时它需要刷新页面。我尝试使用$scope.$apply如下刷新为列表提供信息的REST调用，但它给了我以下错误：

错误：[$rootScope:inprog]$rootScope/inprog？p0=%24

我的核心问题是，Angular是否可以监听对REST调用中存储的数据所做的更改，从而在不刷新页面的情况下进行更改，如果没有，那么实现我在表单输入后刷新页面数据的目标的最佳方法是什么

这是我用来显示数据的控制器：

appControllers.controller('appHomeItemsCtrl', ['$scope', 'appItems', function ($scope, appItems) {

$scope.items = [];

appItems.query({}, function (data) {
    $scope.items = data.value;
// Use scope apply to watch for changes instead of requiring a page reload for results
    scope.$apply();
});
}]);

以下是显示数据的我的HTML：

<table class="table table-striped">
            <tr>
                <th>Title</th>
                <th>
                   Summary
                </th>
                <th>
                    Task Type
                </th>
            </tr>

            <tr ng-repeat="item in items">

                <td>
                    {{item.Title}}
                </td>
                <td>
                    {{item.Body}}
                </td>
                <td>
                    {{item.Task_x0020_Type}}
                </td>
            </tr>
        </table>

更新：使用此选项，它将执行部分操作，但不是全部操作。关于创建函数或推送的答案也是如此。为什么它只在“大部分”时间有效

appControllers.controller('appHomeItemsCtrl', ['$scope', 'appItems', function ($scope, appItems) {

$scope.items = [];

// Use $scope.$evalAsync to watch for changes instead of requiring a page reload for results
$scope.$evalAsync(function () {
appItems.query({}, function (data) {
                $scope.items = data.value;

    })
});
}]);

---

例外情况是因为您放置了

范围

，而不是

$scope

但是，您不应该真正需要在这里使用apply，除非回调来自非角度事件。但如果这是问题所在，我相信您应该在apply调用中修改$scope：

appControllers.controller('appHomeItemsCtrl', ['$scope', 'appItems', function ($scope, appItems) {

$scope.items = [];

appItems.query({}, function (data) {

// Use scope apply to watch for changes instead of requiring a page reload for results
    $scope.$apply(function() {  $scope.items = data.value; });
});
]);

---

例外情况是因为您放置了

范围

，而不是

$scope

但是，您不应该真正需要在这里使用apply，除非回调来自非角度事件。但如果这是问题所在，我相信您应该在apply调用中修改$scope：

appControllers.controller('appHomeItemsCtrl', ['$scope', 'appItems', function ($scope, appItems) {

$scope.items = [];

appItems.query({}, function (data) {

// Use scope apply to watch for changes instead of requiring a page reload for results
    $scope.$apply(function() {  $scope.items = data.value; });
});
]);

---

您没有看到任何更新的原因是保存新项目时，

$scope.items

不会更改。
您可以通过两种方式解决此问题：

保存后将新项目推入项目中

  $scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
        $scope.items.push(itemEntry);
      });

  }

function requestItem(){
   appItems.query({}, function (data) {
              $scope.items = data.value;

    })
  });
}

// Create item
$scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
      requestItem();
  });

}

或

在保存后发出新请求以检索服务器上的所有项目

  $scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
        $scope.items.push(itemEntry);
      });

  }

function requestItem(){
   appItems.query({}, function (data) {
              $scope.items = data.value;

    })
  });
}

// Create item
$scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
      requestItem();
  });

}

---

您没有看到任何更新的原因是保存新项目时，

$scope.items

不会更改。
您可以通过两种方式解决此问题：

保存后将新项目推入项目中

  $scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
        $scope.items.push(itemEntry);
      });

  }

function requestItem(){
   appItems.query({}, function (data) {
              $scope.items = data.value;

    })
  });
}

// Create item
$scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
      requestItem();
  });

}

或

在保存后发出新请求以检索服务器上的所有项目

  $scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
        $scope.items.push(itemEntry);
      });

  }

function requestItem(){
   appItems.query({}, function (data) {
              $scope.items = data.value;

    })
  });
}

// Create item
$scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function(){
      requestItem();
  });

}

---

我发现了为什么它没有一直重新加载数据，这是因为有时$location.path会在$save完成之前执行。在$save函数中包装$location.path或$route.reload允许我控制在数据“重新加载”之前执行$save的执行。我已将赏金授予@pasine，因为他的职位/协助使我得出了这一结论

示例：

$scope.addType = function () {
    console.log("Clicked");
    typeEntry.Title = $scope.itemtype;
    typeEntry.$save(function () { // Ensure execuation of the save befor reloading the view
        $route.reload();
    });
}

 $scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function () {
        $location.path('/');
    });
}

---

我发现了为什么它没有一直重新加载数据，这是因为有时$location.path会在$save完成之前执行。在$save函数中包装$location.path或$route.reload允许我控制在数据“重新加载”之前执行$save的执行。我已将赏金授予@pasine，因为他的职位/协助使我得出了这一结论

示例：

$scope.addType = function () {
    console.log("Clicked");
    typeEntry.Title = $scope.itemtype;
    typeEntry.$save(function () { // Ensure execuation of the save befor reloading the view
        $route.reload();
    });
}

 $scope.createItem = function () {
    console.log("Clicked");
    itemEntry.Task_x0020_Type = $scope.selectedtype.value;
    itemEntry.Title = $scope.itemtitle;
    itemEntry.Body = $scope.itembody;
    itemEntry.$save(function () {
        $location.path('/');
    });
}

---

---

在哪一行它抛出了错误。我可以在控制台中看到它，一旦我加载我的应用程序，你实际上不需要手动应用。不适用的行为是什么？请参见下面我的答案。“异常是因为您放置了范围，而不是$scope”appItems.query确实属于$resource对象，那么您不需要使用

$scope.$apply（）

，使用

$scope.evalAsync（function（）{//code here}）

$timeout（function（）{//code here}）

为了安全地应用digest Cycle，请查看它抛出错误的行。加载应用程序后，我可以在控制台中看到它。实际上，您不需要手动应用。不适用的行为是什么？请参见下面我的答案。“异常是因为您放置了范围，而不是$scope”appItems.query确实属于$resource对象，那么您就不需要使用

$scope.$apply（）

，使用

$scope.evalAsync（function（）{//code here}）

$timeout（function（）{//code here}）来安全地应用摘要循环这给了我一个错误：error:[$rootScope:inprog]那么您不需要$scope。$apply这会给我一个错误：error:[$rootScope:inprog]那么你就不需要$scope了。$apply这两种方法似乎大部分时间都能工作，但如果我输入数据太快，它就不起作用了。在第一个示例中，我忘了将推送项包装到回调函数中。你能用回调函数更新你的答案吗？谢谢你的帮助。有什么线索说明为什么它只在大部分时间更新，而不是在所有时间更新吗？很难回答在没有看到完整代码的情况下返回。在设置$scope.items后尝试放置日志，看看是否正确填充。这两种方法似乎大部分时间都有效，但如果我输入数据太快，则无效。第一个示例中，我忘了将推送项包装到回调函数中。您可以使用回调更新您的答案吗？谢谢您的帮助。有什么问题吗为什么它只在大部分时间更新，而不是在所有时间更新？如果看不到完整的代码，很难判断。请在设置$scope.items后尝试放置日志，并查看它是否正确填充。