Question

我已经遵循angular-ui / ui-router wiki的指导原则，只在数据准备就绪时加载我的图像和文本。

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

我的Plnkr： http://plnkr.co/edit/4jZuBwm8TI42U6ZvWIPJ?p=preview

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

index.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="    '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;


        });

    }]);
"></div>'
          })
          .state('work.details', {
            url: '/work/:workId',
            views: {
              'portfolio@work': {
                templateUrl: 'app/work/work.html',
                controller: 'WorkCtrl'
              }
            }
          });

        $urlRouterProvider.otherwise('/');

      });

work.controller.js

{{1}}

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

Answer 1

<强> Plunker

您必须使用状态控制器注入解析结果。然后，您可以像往常一样在视图中使用该绑定。

您需要state

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

现在，您可以在HTML中绑定{{message}}。

Resolve Documentation

如果你不清楚的话，研究那里的例子。请注意，resolve中发生的事情与controller state的{{1}}进一步向下注释之间存在必要的相关性。

AngularJS＆gt; ui.router仅在数据准备就绪时使用promise。

1 个答案: