为什么我的$scope字段在尝试重新加载数据时无法清除?



我第一次使用Angular,在尝试制作一个简单的重载按钮时遇到了问题。我的网页只是显示了一个表,它的数据是从Parse数据库中获取的。我还有一些其他按钮可以更改表中的项目。在移动东西之后,我希望能够重新加载我的表并进行恢复以反映数据库,从而清除发生的任何更改。如有任何帮助,我们将不胜感激!

$scope.reset = function() {
    $scope.compOrder = [];
    $scope.foundIndex = -1;
    $scope.selectedItem = {};
    $scope.citySelect($scope.currentCity);
}

以下是其他内容以查看其他上下文。注意,函数citySelect是我用来从Parse中提取数据并填充模型的。

var myApp = angular.module('CompetitionManager',[]);
myApp.controller('MainController', ['$scope', function($scope) {
    $scope.availableCities = [];
    $scope.compOrder = [];
    $scope.selectedItem = {};
    $scope.foundIndex = -1;
    $scope.currentCity = {};
    $scope.init = function() {
        Parse.initialize("XXX", "XXX");
        Parse.Cloud.run("checkAllCities", {}, {
            success: function(data) {
                var cityArr = [];
                for (var i = 0; i < data.length; i++) {
                    if(data[i].get("uploaded")) {
                        $scope.availableCities.push(data[i]);
                        $scope.$apply()
                    }
                }
            },
            error: function(e) {
                alert("Failed Loading Cities");
            }
        })
    }
    $scope.citySelect = function(city) {
        $scope.currentCity = city;
        try {
            var cityObj = JSON.parse(city);
        }
        catch (e) {
            $scope.compOrder = [];
            return;
        }
        var cityName = cityObj["city"];
        Parse.Cloud.run("getCityCompetition", {city : cityName}, {
            success: function(data) {
                $scope.compOrder = $scope.compOrder.concat(data);
                $scope.$apply()
            },
            error: function(e) {
                alert(e);
            }
        });
    }
    $scope.rowClicked = function(item) {
        $scope.selectedItem = item;
        $scope.foundIndex = $scope.compOrder.indexOf(item);
    }
    $scope.swapUp = function() {
        if($scope.foundIndex > 0) {
            swapElements($scope.compOrder, $scope.foundIndex-1, $scope.foundIndex);
            $scope.foundIndex--;
        }
    }
    $scope.swapDown = function() {
        if ($scope.foundIndex < $scope.compOrder.length-1 && $scope.foundIndex >= 0) {
            swapElements($scope.compOrder, $scope.foundIndex, $scope.foundIndex+1);
            $scope.foundIndex++;
        }
    }
    $scope.keyPress = function(event, item) {
        if(event.which != 13) {
            return;
        }
        var value = event["srcElement"]["value"]
        if (!value) {
            return;
        }
        var index = $scope.compOrder.indexOf(item);
        var firstItem = $scope.compOrder[index];
        firstItem.set("length", [0, 0, 0, 0, value, 0]);
        for(var i = index + 1; i < $scope.compOrder.length; i++) {
            var currentItem = $scope.compOrder[i];
            var currentTime = currentItem.get("startTime");
            var lastItem = $scope.compOrder[i - 1];
            var lastLength = lastItem.get("length")[4];
            var lastTime = lastItem.get("startTime");
            currentTime.setTime(lastTime.getTime() + lastLength*60*1000);
        }
    }
    $scope.reset = function() {
        $scope.compOrder = [];
        $scope.foundIndex = -1;
        $scope.selectedItem = {};
        $scope.citySelect($scope.currentCity);
    }
    var swapElements = function swapElements(arr, index1, index2) {
        var firstTime = new Date(arr[index1].get("startTime").getTime());
        var firstLength = arr[index2].get("length")[4];
        var secondTime = new Date(firstTime.getTime());
        secondTime.setMinutes(secondTime.getMinutes() + firstLength);
        arr[index1].set("startTime", secondTime);
        arr[index2].set("startTime", firstTime);
        var temp = arr[index1];
        arr[index1] = arr[index2];
        arr[index2] = temp;
    }
}]);

UI不知道范围的更改,因此必须调用$scope.$apply()才能运行摘要循环。

$scope.reset = function() {
    ...
    $timeout(function() {
       $scope.$apply();
    });
}

使用$timeout,以便它在清除当前调用堆栈之后运行,否则可能已经有一个摘要循环在运行。

查看这篇文章,了解有关摘要周期的更多帮助。

最新更新