如何在状态输入ui路由器时立即显示模板，然后当承诺被解决时显示数据

How to show template immediately on state enter in ui-router, next when promise is resolved then show data?

本文关键字：显示 然后 数据 解决 承诺 状态 输入 ui 路由器      更新时间：2023-09-26

如何显示第一个模板，然后如果位置承诺被解析，只需在加载的模板中渲染它？甚至我也想在输入中显示微调器，以通知用户数据正在加载。我想我可以做一个可以直接在landingCtrl中使用的外部服务，但它是否可以通过ui路由器以某种方式完成？

var app = angular
  .module('myApp', [
   'ngCookies', 'ui.router'
  ])
app.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
    .state('landing', {
        url: '/landing',
        templateUrl: 'landing.html',
        controller: 'landingCtrl',
        resolve: {
            location: [
                '$state', '$stateParams', '$q', '$window'
                , function ($state, $stateParams, $q, $window) {
                  var deferred = $q.defer();
                 $window.navigator.geolocation.getCurrentPosition(
                   function (position) {
                    deferred.resolve(position);
                 });
                 return deferred.promise;
            }]
        }
    })
}])
app.controller('landingCtrl', ['$scope', 'location', function($scope, location) {
  $scope.location = location;
}]);

landing.html

<h1>Show immediately</h1>
<input type="text" ng-model="location" showspinnerwhenloading></input>
Resolved data: {{location}}

这可能不是你想要的答案，但你可以创建一个abstract状态，在它的resolve中找出你想要去的地方，或者如果你想在导航到主html之前向用户显示一些东西，你可以制作一个具体的（而不是abstract）状态，并在其解析中导航到子状态。这实际上取决于你想对主模板（无论位置如何都要加载的模板）做什么。

实现将是这样的：

--main state (abstract or concrete depending on your needs)
    --child states (to which you're going to navigate to, when the parent's resolve promises return)

我希望我能回答你的问题。

相关文章：