javascript - AngularJS > ui.router 仅在数据准备好时使用 promise 。

Question

我遵循了 angular-ui/ui-router wiki 上的指南，只在数据准备好时加载我的图像和文本。

我没有收到任何错误，但它似乎不起作用。 我是 Angular JS 的新手，所以请原谅我缺乏专业知识。

我的积分: http://plnkr.co/edit/4jZuBwm8TI42U6ZvWIPJ?p=preview

下面的代码与我的 Plnkr 略有不同(由于提供了一个工作演示)。

索引.js

    var app = angular.module('myApp', ['ngAnimate', 'ngCookies', 'ui.router'])
      .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('home', {
            url: '/',
            templateUrl: 'app/main/main.html',
            controller: 'MainCtrl'
          })
          .state('about', {
            url: '/about',
            templateUrl: 'app/about/about.html',
            controller: 'AboutCtrl'
          })
          .state('work', {
            resolve: {
              customPromise: function($q, $timeout) {
                var deferred = $q.defer();
                $timeout(function() {
                  deferred.resolve('all assets have loaded!');
                }, 1000);
                return deferred.promise;
              }
            },
            abstract: true,
            template: '<div ui-view="portfolio" class="page-work" autoscroll="true" data-loading="{{1}}"></div>'
          })
          .state('work.details', {
            url: '/work/:workId',
            views: {
              'portfolio@work': {
                templateUrl: 'app/work/work.html',
                controller: 'WorkCtrl'
              }
            }
          });

        $urlRouterProvider.otherwise('/');

      });

work.controller.js

    'use strict';

    var app = angular.module('myApp');

    app.controller('WorkCtrl', ['$scope', '$stateParams', '$http', '$location', function($scope, $stateParams, $http, $location, customPromise) {

        $scope.customPromise = customPromise;

        if (!$stateParams.workId) {
            $location.path('/');
        }

        $http.get('projects/' + $stateParams.workId + '.json').success(function(data) {
            $scope.work = data;
            $scope.pageClass = 'page-work'; // only use to add class for ui view

            //function for next previous

            var currentWorkIndex;
            var l = $scope.allWorks.length;
            for (var i = 0; i < l; i++) {
                if ($scope.allWorks[i].id === $stateParams.workId) {
                    currentWorkIndex = i;
                    break;
                }
            }
            var prevWorkIndex = (currentWorkIndex !== 0) ? (currentWorkIndex - 1) : (l - 1);
            var nextWorkIndex = (currentWorkIndex !== l - 1) ? (currentWorkIndex + 1) : (0);
            $scope.prevWork = $scope.allWorks[prevWorkIndex].id;
            $scope.nextWork = $scope.allWorks[nextWorkIndex].id;


        });

    }]);

非常感谢任何帮助。谢谢!

Answer 1

Plunker

您必须使用状态 Controller 注入(inject)解析结果。然后您可以像往常一样在您的 View 中使用该绑定(bind)。

您在状态中需要这个

controller: function($scope, customPromise) {
        $scope.message = customPromise;
      }

现在，您可以在您的 HTML 中绑定(bind) {{message}}。

Resolve Documentation

如果您不清楚，请研究那里的示例。请注意，resolve 中发生的事情与将其注入(inject) state 的 controller 之间存在必要的关联。