javascript - Angularjs 必须刷新页面才能看到更改

Question

我有的是简单的 CRUD 操作。项目列在页面上，当用户点击按钮添加时，弹出模式，用户输入数据，数据被保存并且应该自动(无需刷新)添加到页面上的列表。

服务:

getAllIncluding: function(controllerAction, including) {
            var query = breeze.EntityQuery.from(controllerAction).expand(including);
            return manager.executeQuery(query).fail(getFailed);
        }, 

addExerciseAndCategories: function(data, initialValues) {
            var addedExercise = manager.createEntity("Exercise", initialValues);
            _.forEach(data, function(item) {
                manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
            });
            saveChanges().fail(addFailed);

            function addFailed() {
                removeItem(items, item);
            }
        },

Controller :

 $scope.getAllExercisesAndCategories = function() {
        adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
            .then(querySucceeded)
            .fail(queryFailed);

    };

     function querySucceeded(data) {

            $scope.queryItems = adminCrudService.querySucceeded(data);

            var exerciseIds = _($scope.queryItems).pluck('ExerciseId').uniq().valueOf();
            $scope.exerciseAndCategories = [];
            var createItem = function (id, exercise) {
                return {
                    ExerciseId: id,
                    Exercise : exercise,
                    ExerciseCategories: []
                };
            };

            // cycle through ids
            _.forEach(exerciseIds, function (id) {
                // get all the queryItems that match
                var temp = _.where($scope.queryItems, {
                    'ExerciseId': id
                });
                // go to the next if nothing was found.
                if (!temp.length) return;
                // create a new (clean) item
                var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
                // loop through the queryItems that matched
                _.forEach(temp, function (i) {
                    // if the category has not been added , add it.
                    if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
                        newItem.ExerciseCategories.push(i.ExerciseCategory);
                    }
                });
                // Add the item to the collection
                $scope.items.push(newItem);
            });


            $scope.$apply();

        }

这是我从 Controller 添加新数据的方式:

 adminCrudService.addExerciseAndCategories($scope.selectedCategories, { Name: $scope.NewName, Description: $scope.NewDesc });

所以我的问题是，为什么列表没有实时更新(当我点击保存时我必须刷新页面)。

编辑

这是我的查询成功

querySucceeded: function (data) {
            items = [];
            data.results.forEach(function(item) {
                items.push(item);
            });
            return items;


        }

编辑 2

我相信我已经缩小了我的问题范围!

所以 PW Kad我花了两个小时试图帮助我解决这个问题(为此我非常感谢他)，但不幸的是没有成功。我们主要尝试修复我的服务，所以当我回到我的 PC 时，我再次尝试修复它。我相信我的服务很好。 (我已经按照 Kad 在他的回答中所建议的进行了一些更改)。我相信问题出在 Controller 中，我已经记录了 $scope.items，当我添加新项目时它们不会改变，之后我已经记录了 $scope.queryItems，并且我注意到它们在添加新项目后发生了变化项目(不刷新)。所以问题可能会在加载初始数据后通过某种方式 $watching $scope.queryItems 来解决，但目前我不太确定如何做到这一点。

Answer 1

好的，我将发布一个答案，指导您如何解决您的问题。问题似乎不在于 Breeze，也不在于 Angular，而在于您将两者结合起来的方式。我这样说是因为了解您在做什么对于理解调试过程很重要。

创建一个实体将其添加到缓存中，实体状态为 isAdded - 这是一个正确的说法，不要以为不是。

现在你的代码...

您不必将您的查询执行与 promise 链接起来，但在您的情况下，您将数据返回到您的 Controller ，然后将其直接传递回您服务中的某个函数，您的问题中未列出。我添加了一个函数来复制你的可能的样子。

getAllIncluding: function(controllerAction, including) {
            var query = breeze.EntityQuery.from(controllerAction).expand(including);
            return manager.executeQuery(query).then(querySucceeded).fail(getFailed);

            function querySucceeded(data) {
                return data.results;
            }
        }, 

现在在你的 Controller 中简单地处理结果 -

$scope.getAllExercisesAndCategories = function() {
    adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
        .then(querySucceeded)
        .fail(queryFailed);
};

 function querySucceeded(data) {
        // Set your object directly to the data.results, because that is what we are returning from the service
        $scope.queryItems = data;  
        $scope.exerciseAndCategories = [];

最后，让我们添加创建实体的属性，看看这是否让 Angular 有机会正确绑定(bind) -

_.forEach(data, function(item) { 
    var e = manager.createEntity("ExerciseAndCategory"); 
    e.Exercise = addedExercise; e.Category: item.Category; 
});