Question

我想在Angular ui-router应用程序的状态转换期间显示加载动画。

查看以下代码

$stateProvider
.state("app",
{
    abstract: true,
    url: "",
    template: "<ui-view/>",
    controller: "appController",
    controllerAs: "vm",
    resolve: {
        result_data_abstract: function ($q, $timeout))
        {
            var deferred = $q.defer();
            $timeout(function () {
                deferred.resolve("from abstract");
            }, 500);
            return deferred.promise;
        }
    }
})
.state("app.real",
{
    url: "/real/{id}",
    templateUrl: "somepath/template.html",
    controller: "realController",
    controllerAs: "vm",
    resolve: {
        result_data_real: function ($q, $timeout))
        {
            var deferred = $q.defer();
            $timeout(function () {
                deferred.resolve("from real");
            }, 500);
            return deferred.promise;
        }
    }
}
.state("app.real2",
{
    url: "/real2/{id}",
    templateUrl: "somepath2/template.html",
    controller: "real2Controller",
    controllerAs: "vm",
    // Note no resolve
})

因此两个具体的状态都从抽象状态继承 - 抽象类有一个决心。

然而，只有一个真实（具体）状态有自己的决心。

我的目标是使用以下代码在转换期间显示加载动画：

$scope.$on("$stateChangeStart", function (event, toState) {
            console.log("stateChangeStart", toState);
            if (toState.resolve) {
                showSpinner();
            }
        });

$scope.$on("$stateChangeSuccess", function (event, toState) {
    console.log("stateChangeSuccess", toState);
    if (toState.resolve) {
        hideSpinner();
    }
});

由于具体状态继承的抽象状态有一个解决方案，我希望每次“toState.resolve”都是真的，从它继承的抽象父状态获得解析。

但事实并非如此 - 当我加载app.real2时，'toState.resolve'为空。

有没有办法让这项工作？

Answer 1

您是否正在加载整个＆＃34;页面＆＃34;？如果是这样，我通过在运行中调用它来做到这一点。

app.run(function($rootScope) {

    $rootScope.$on("$stateChangeStart", function () {
        console.log("stateChangeStart");
        showSpinner();
    });

    $rootScope.$on("$viewContentLoaded", function () {
        console.log("stateChangeSuccess");
        hideSpinner();
    });
});

我没有使用 $ stateChangeSuccess 和 toState ，但看起来它也可以正常工作。

状态在ui-router中转换并从父抽象状态解析

1 个答案: