javascript - 如何在 ui-router 中输入状态时立即显示模板，接下来当 promise 解决时然后显示数据？

Question

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

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

登陆.html

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

Answer 1

这可能不是您正在寻找的答案，但您可以创建一个abstract状态，并在其中resolve找出您想要的答案，或者如果在您的情况下，您想在导航到主 html 之前向用户显示一些内容，您可以创建一个具体的(而不是抽象)状态并导航到其解析中的子状态以及。这实际上取决于您想要对主模板执行什么操作(无论位置如何都会加载的模板)。

实现将是这样的:

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

希望我能回答你的问题。