使用 ui-router 解析时，如何访问解析后的数据? [英] when using ui-router resolve, how do I access the resolved data?

问题描述

我有以下路线:

$stateProvider.state(基地"，{网址:"",摘要:真实，解决: {aService: "aService",数据需要:函数(aService){返回一个Service.getDataMethod().$promise;}},模板: "",});$stateProvider.state("base.main",{网址:/"，templateUrl: coreConfig.path() + "/modules/content/content.tmpl.html",控制器:aController"，controllerAs: "aCtrl",数据:{ requiresLogin: true }});

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

在我的 app.js 文件中我有

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

我有我的控制器:

 module.exports = ["aService", "dataNeeded", aController];功能 aController(aService, dataNeeded) {var test = dataNeeded;//值未定义}

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

解决方案

基于此问答一个

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

我创建了这个工作plunker，它能够用RequireJS 和注入状态 resolve - 来自 Parent 或来自 Child 本身

这将是状态定义:

$stateProvider.state(基地"，{摘要:真实，解决: {数据需要:函数(aService){返回一个Service.getDataMethod().then(function(response){ return response.data });//.$承诺;}},模板: "",});$stateProvider.state("base.other", {网址:/其他"，模板: "
来自 ctrl 的消息:{{message}}" +"<br>and someResolved: <b>{{someResolved}}<b>"+"<br> 和 dataNeeded: <pre>{{dataNeeded | json}}</pre>"+"</div>",控制器:OtherCtrl"，解决: {someResolved: function() { return "这是键 'someResolved' 的解析值" },loadOtherCtrl: ["$q", 函数($q) {var deferred = $q.defer();require(["OtherCtrl"], function() { deferred.resolve(); });返回 deferred.promise;}],},});

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

这是RequireJS的控制器:

define(['app'], function (app) {//默认控制器//被添加到app"模块中//懒惰，而且只有一次app_cached_providers.$controllerProvider.register('OtherCtrl',['$scope', 'dataNeeded', 'aService', 'someResolved',函数($scope，dataNeeded，aService，someResolved){$scope.message = "OtherCtrl";$scope.someResolved = someResolved;$scope.dataNeeded = dataNeeded;控制台日志(数据需要)console.log(aService)console.log(someResolved)}]);});

检查它在这里操作

I have the following routes:

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

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

and in my app.js file I have

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

I have my controller:

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

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

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

解决方案

Based on this Q & A

angular-ui-router with requirejs, lazy loading of controller

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

This would be the state defintion:

$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...

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

});

Check it here in action

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