Question

我有以下路线：

$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'路线中所需的数据。

在我的app.js文件中我有

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
    }

如何从`＆＃39; base.main＆＃39;中访问抽象路径中加载的'dataNeeded'。控制器？

Answer 1

每个儿童州都可以向其父母索取重新获得的东西，这样就行了

.controller('aController', ['$scope', 'dataNeeded', 
   function ($scope, dataNeeded) { 
     ...
}])

检查这个相关的Q＆amp;答：

Angularjs ui-router abstract state with resolve

及其working example

EXTEND

我们的方案有another working example：

国：

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

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

控制器和服务：

.controller('aController', ['$scope', 'dataNeeded', 'aService',
    function($scope, dataNeeded, aService) {
      $scope.dataNeeded = dataNeeded;
      $scope.aService = aService;
    }
])
.factory('aService', function() {
    return {
      getDataMethod: function() {
        return { name:  "abc", id : 1 }
      }
    }
})

这个模板将同时呈现 'dataNeeded', 'aService' ：

<h5>aService</h5>
  <b>{{aService}}</b>
<h5>dataNeeded</h5>
  <pre>{{dataNeeded | json}}</pre>

行动中的示例here

更多扩展

另一个，more extended example可能正在加载data.json：

{ "name":  "def", "id" : 22 }

该服务将是

.factory('aService', ['$http', function($http) {
    return {
      getDataMethod: function() {
        return $http.get("data.json");
      }
    }
}])

父母抽象解决：

  resolve: {
    aService: "aService",
    dataNeeded: function(aService) {
      return aService.getDataMethod()
        .then(function(response){ return response.data }); //.$promise;
    }
  },

检查here in action

Answer 2

基于此Q＆amp;甲

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

我创建了this working plunker，它能够使用 RequireJS 加载控制器并从父级或子级本身注入状态 resolve / p>

这将是州的定义：

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

有关详细信息，请参阅complete explanation here ...

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

});

检查here in action

Answer 3

在你的app.js

中

  resolve:{
      aService: "aService",
      dataNeeded: function(aService) {
        return aService.getDataMethod().$promise;
      }
   },

在您的控制器中：

app.controller('ServiceController', [
    'aService',
    'dataNeeded',
    function(aService, dataNeeded ) {
   ...
}];

现在，您可以访问控制器'ServiceController'中的'aService'和'dataNeeded'。

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

3 个答案: