Question

我有一个Angular表，只要有人通过表单添加项目，就应该更新。有时它会立即显示该项目，但有时需要刷新页面。我已经尝试使用$ scope。$ apply来刷新一个提供列表的REST调用，但它给了我以下错误：

错误：[$ rootScope：inprog] http://errors.angularjs.org/1.3.8/ $ rootScope / inprog？p0 =％24digest

我的核心问题是，Angular可以监听存储在REST调用中的数据的更改，以便在没有页面刷新的情况下进行更改，如果没有，那么在表单输入后满足我刷新页面数据的目标的最佳方法是什么？ / p>

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

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('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {

var itemEntry = new appItems;

 $scope.types = [];

// Get list of types for use in dropdown
 appTypes.query(function (typedata) {
     var itemTypes = typedata.value; 
    // Foreach type, push values into types array
    angular.forEach(itemTypes, function (typevalue, typekey) {

        $scope.types.push({
            label: typevalue.Title,
            value: typevalue.Title,
        });
    })
});

// 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();
    $location.path('/');
}

$scope.cancel = function () {
    $location.path('/');
}
}]);

UPDATE：使用它，它会执行一些但不是所有的时间。关于创建函数或推送的答案也是如此。为什么它只在“大多数”时间起作用？

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;

    })
});
}]);

Answer 1

您没有看到任何更新的原因是$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);
      });

  }

OR

在保存

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

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

}

Answer 2

例外情况是因为您放置了scope，而不是$scope

但是，你不应该真的需要在这里使用apply - 除非回调来自非角度事件。但如果这是问题，我相信你应该在apply call中修改$ 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; });
});
]);

Answer 3

我发现为什么它不是一直重新加载数据，这是因为有时$ 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('/');
    });
}

角度确保列表在没有页面重新加载的情况下更新

3 个答案: