Question

我遇到这个问题是我的视图在$ scope params被分配之前加载，这是由$ http服务调用引起的，需要花费一些时间才能获得响应。

这让我的页面重新加载时，下拉框与url params不同步...

无论如何重新加载这些$ scope params还是等到它们在呈现视图之前得到值？我想要最简单的解决方案，因为我还远远没有使用angularjs。如果需要更多信息，请给我一个提示！

以下是一些代码......

路线

angular.module('app', ['ngRoute', 'app.controller', 'app.service', 'app.filter'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/order/:id', {
            templateUrl: '../../App_AngularJs/partials/specificOrder.htm',
            controller: 'orderController',
            reloadOnSearch: true
        })
        .when('/orderitem/:id', {
            templateUrl: '../../App_AngularJs/partials/orderItem/orderItem.htm',
            controller: 'orderItemController',
            reloadOnSearch: true
        })
        .when('/', {
            templateUrl: '../../App_AngularJs/partials/searchOrder.htm',
            controller: 'ordersController',
            reloadOnSearch: false
            //Use some resolve here!? How!?
        });
}

控制器

var orderContrl = angular.module('app.controller', ['angularTreeview', 'ui.bootstrap'])
.controller('ordersController', [
    '$scope', '$routeParams', '$location', '$filter', '$modal', '$log', 'orderService',
    function ($scope, $routeParams, $location, $filter, $modal, $log, orderService) {
        init();

        function init() {
            $scope.searchtext = $routeParams.search || '';
            $scope.page = $routeParams.page || 1;
            $scope.take = $routeParams.take || 10;
            $scope.status = $routeParams.status || -1;
            $scope.group = $routeParams.group || -1;
            $scope.type = $routeParams.type || -1;
            $scope.category = $routeParams.category || -1;
            $scope.selectedOrganisation = "Knoc LK";

            getOrders(true);
            getFilters(true);
        }

        function getFilters(reloadPage) {
            orderService.queryOrderAllDropdown()
                .then(function (response) {
                    $scope.orderGroup = response.OrderGroups;
                    $scope.orderStatus = response.OrderStatus;
                    $scope.orderType = response.OrderTypes;
                    $scope.orderPackageCategory = response.ProductPackageCategories;
                    $scope.orderAllCategory = response.ProductItemCategories;

                    //Sets type and shows different categories depending on type chosen
                    getCategory();

                    //Trying to reassign the values but still nothing...
                    if (reloadPage) {
                        angular.forEach($scope.orderStatus, function (value) {
                            if ($routeParams.status == value.ID)
                                $scope.status = value.ID;
                        });
                        //Trying to reassign the values but still nothing...
                        $scope.group = $scope.group;
                    }

                },
                function (errorMessage) {
                    $scope.error = errorMessage;
                });
        }

服务

 angular.module('app.service', [])
.service('orderService', ['$http', '$q', function ($http, $q) {

    this.queryOrderAllDropdown = function () {
        var deferred = $q.defer();
        $http({
            type: 'GET',
            url: 'GenericHandlers/HttpOrderService.ashx',
            method: 'GetOrderAllDropdown',
            headers: { 'Content-Type': 'text/plain' }
        }).success(function (data) {
            deferred.resolve(data);
        }).error(function () {
            deferred.reject("An error occured while fetching data");
        });

        return deferred.promise;
    },

Answer 1

您需要使用解析器从后端获取数据。在$ routeProvider中添加“resolve”将在控制器获得控制权之前获取数据。查看this blog post以获取类似示例。

在分配$ scope值之前查看载荷

1 个答案: