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

Javascript Angularjs必须刷新页面才能看到更改,javascript,angularjs,asp.net-web-api,breeze,Javascript,Angularjs,Asp.net Web Api,Breeze,我有一个简单的积垢操作。项目列在页面上,当用户单击“添加”按钮时,会弹出模式,用户输入数据并保存数据,数据应自动(无需刷新)添加到页面上的列表中 服务: getAllIncluding: function(controllerAction, including) { var query = breeze.EntityQuery.from(controllerAction).expand(including); return manager.exec

我有一个简单的积垢操作。项目列在页面上,当用户单击“添加”按钮时,会弹出模式,用户输入数据并保存数据,数据应自动(无需刷新)添加到页面上的列表中

服务:

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);
            }
        },
控制器:

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

        }
 adminCrudService.addExerciseAndCategories($scope.selectedCategories, { Name: $scope.NewName, Description: $scope.NewDesc });
所以我的问题是,为什么列表不能实时更新(当我点击save时,我必须刷新页面)

编辑

这是我的疑问

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


        }
编辑2

我相信我已经缩小了我的问题

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

好的,我将发布一个答案,应该可以指导您如何解决这个问题。问题似乎不在于微风,也不在于棱角,而在于你将两人结合在一起的方式。我这样说是因为为了理解调试过程,理解您正在做的事情很重要

创建实体会将其添加到缓存中,entityState为isAdded-这是一条正确的语句,不要这样想

现在为您的代码

您不必将查询执行与承诺联系起来,但在您的情况下,您将数据返回给控制器,然后将其直接传递回服务中的某个函数,这在您的问题中没有列出。我添加了一个函数来复制您的可能的外观

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;
            }
        }, 
现在,在控制器中,只需处理结果-

$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提供了正确绑定的机会-

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

所以我设法解决了我的问题!不确定这是否是正确的解决方案,但它现在起作用了。 我已将所有内容转移到我的服务中,现在看起来如下所示:

function addCategoriesToExercise(tempdata) {
        var dataToReturn = [];
        var exerciseIds = _(tempdata).pluck('ExerciseId').uniq().valueOf();
        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(tempdata, {
                '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
            dataToReturn.push(newItem);
        });

        return dataToReturn;
    }

    addExerciseAndCategories: function (data, initialValues) {
        newItems = [];

        var addedExercise = manager.createEntity("Exercise", initialValues);

        _.forEach(data, function (item) {
            var entity = manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
            items.push(entity);
            newItems.push(entity);

        });
        saveChanges().fail(addFailed);

        var itemsToAdd = addCategoriesToExercise(newItems);

        _.forEach(itemsToAdd, function (item) {
            exerciseAndCategories.push(item);
        });

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

 getAllExercisesAndCategories: function () {
            var query = breeze.EntityQuery.from("ExercisesAndCategories").expand("Exercise,ExerciseCategory");
            return manager.executeQuery(query).then(getSuceeded).fail(getFailed);

        },

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

        exerciseAndCategories = addCategoriesToExercise(items);

        return exerciseAndCategories;
    }

作为一个提醒,这是一个绝对吨的代码,你张贴和它是非常耗时的挖掘所有。如果您将其简化为您遇到问题的代码,确定问题发生的位置,并寻求特定帮助,您可能会取得更大的成功。您的服务上的querySucceeded功能在哪里?为什么你要返回结果,然后将其发送回服务?为什么你需要调用scope.apply?让我们用这个快速聊天…让我们
   $scope.getAllExercisesAndCategories = function () {
        adminExerciseService.getAllExercisesAndCategories()
            .then(querySucceeded)
            .fail(queryFailed);

    };
      function querySucceeded(data) {
            $scope.items = data;

            $scope.$apply();

        }