使用 ui-router resolve 时，如何访问已解析的数据?

问题描述

我有以下路线:

$stateProvider
    .state("base",
    {
        url: "",
        abstract: true,
        resolve: {
            aService: "aService",
            dataNeeded: function(aService) {
            return aService.getDataMethod().$promise;
            }
        },
        template: "<ui-view/>",
    });


$stateProvider
    .state("base.main",
    {
        url: "/",
        templateUrl: coreConfig.path() + "/modules/content/content.tmpl.html",
        controller: "aController",
        controllerAs: "aCtrl",
        data: { requiresLogin: true }
    });

我正在使用抽象路由来解析子 'base.main' 路由中所需的数据.

I'm using an abstract route to resolve data required in the child 'base.main' route.

在我的 app.js 文件中有

and in my app.js file I have

angular.module("aModule", ["CoreModule"])
    .controller({ "aController": require("./modules/content/aController.controller.js") });

我有我的控制器:

 module.exports = ["aService", "dataNeeded", aController];

    function aController(aService, dataNeeded) {
        var test = dataNeeded; //value is undefined
    }

如何从 `'base.main' 控制器中访问加载在抽象路由中的 'dataNeeded'?

How do I access the 'dataNeeded' loaded in the abstract route from within the `'base.main' controller?

推荐答案

基于此问答一个

angular-ui-router with requirejs，延迟加载控制器

我创建了 这个工作插件，它能够用 RequireJS 并注入状态 resolve - 来自父级或来自子级本身

I created this working plunker, which is able to load controller with RequireJS and inject state resolve - from Parent or from the Child itself

这将是状态定义:

$stateProvider
  .state("base",
  {
    abstract: true,
    resolve: {
        dataNeeded: function(aService) {
          return aService.getDataMethod()
            .then(function(response){ return response.data }); //.$promise;
        }
    },
    template: "<ui-view/>",

  });

$stateProvider
  .state("base.other", {
    url: "/other",
    template: "<div>The message from ctrl: {{message}}" +
    "<br>and someResolved: <b>{{someResolved}}<b>" +
    "<br> and dataNeeded: <pre>{{dataNeeded | json}}</pre>" +
    "</div>",
    controller: "OtherCtrl",
    resolve: {
      someResolved: function() { return "This is resolved value for key 'someResolved'" },
      loadOtherCtrl: ["$q", function($q) {
        var deferred = $q.defer();
        require(["OtherCtrl"], function() { deferred.resolve(); });
        return deferred.promise;
      }],
    },
  });

有关更多详细信息，请阅读此处的完整说明...

For more details read complete explanation here...

这是 RequireJS 的控制器:

And this is the controller for RequireJS:

define(['app'], function (app) {
    // the Default Controller
    // is added into the 'app' module
    // lazily, and only once
    app_cached_providers
      .$controllerProvider
      .register('OtherCtrl',['$scope', 'dataNeeded', 'aService', 'someResolved',
        function ($scope, dataNeeded, aService, someResolved) {
          $scope.message = "OtherCtrl";
          $scope.someResolved = someResolved;
          $scope.dataNeeded = dataNeeded;
          console.log(dataNeeded)
          console.log(aService)
          console.log(someResolved)
    }]);

});

检查它在这里行动

这篇关于使用 ui-router resolve 时，如何访问已解析的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！