Angular.js必須刷新頁面才能看到更改

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

控制器：

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

所以我的問題是，為什么列表沒有實時更新（當我點擊“保存”時，我必須刷新頁面）。

編輯

這是我的查詢

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


        }

編輯2

我相信我已經解決了我的問題！

因此， PW Kad用了兩個小時的時間試圖幫助我解決此問題（為此我非常非常感謝他），但不幸的是沒有成功。 我們主要嘗試修復服務，因此當我返回PC時，我再次嘗試修復它。 我相信我的服務很好。 （正如Kad在回答中所建議的，我進行了一些更改）。 我相信問題出在控制器上，我已經記錄了$ scope.items，當我添加新項目時，它們沒有變化，之后我記錄了$ scope.queryItems，我注意到它們在添加新項目后會發生變化項目（不刷新）。 因此，可能在加載初始數據后通過某種方式$ watching $ scope.queryItems可以解決問題，但是目前我不太確定如何執行此操作。

Answer 1

好的，我將發布一個答案，該答案應指導您如何解決您的問題。 問題似乎與Breeze無關，與Angular無關，而與您將兩者結合在一起的方式無關。 我之所以這樣說，是因為了解您在做什么才能理解調試過程很重要。

創建實體會將其添加到具有iFyre實體狀態的狀態的高速緩存中 -這是一個真實的語句，請不要以為然 。

現在為您的代碼...

你不必鏈查詢執行了承諾，但在你的情況是將數據返回到控制器，然后通過它右后衛有些功能在你的服務，這是不是在你的問題中列出。 我添加了一個功能來復制你什么大概的樣子。

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

Answer 2

所以我設法解決了我的問題！ 不知道這是否是正確的解決方案，但現在可以使用。 我已將所有內容移至我的服務，現在看起來像這樣：

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

在控制器中，我只有這樣：

   $scope.getAllExercisesAndCategories = function () {
        adminExerciseService.getAllExercisesAndCategories()
            .then(querySucceeded)
            .fail(queryFailed);

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

            $scope.$apply();

        }