lors de l'utilisation de l'interface utilisateur du routeur résoudre, comment puis-je accéder à l'résolu de données?

J'ai les itinéraires suivants:

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

Je suis en utilisant un résumé de l'itinéraire pour résoudre des données nécessaires à l'enfant 'base.main' route.

et dans mon app.js fichier j'ai

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

J'ai mon contrôleur:

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

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

Comment puis-je accéder à la 'dataNeeded' chargé dans le résumé d'itinéraire à partir de l'intérieur de la base`.principal " controller?

OriginalL'auteur FiveTools | 2015-06-03

angular-ui-router angularjs

Basé sur cette Q & Un

angular-ui-router avec requirejs, le chargement paresseux de contrôleur

J'ai créé ce travail plunker, qui est capable de charger contrôleur avec RequireJS et injecter de l'état resolve - du Parent ou de l'Enfant lui-même

Ce serait l'état définition:

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

Pour plus de détails, lire explication complète ici...

Et c'est le contrôleur de 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)
    }]);

});

Vérifier ici en action

OriginalL'auteur Radim Köhler

Chaque enfant de l'état peut demander resloved trucs de son parent(s), donc ce serait le travail

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

Vérifier ce Q & A:

Angularjs ui-router résumé de l'état à résoudre

Et ses exemple de travail

ÉTENDRE

Il est un autre exemple de travail liées à notre scénario:

États:

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

Contrôleur et de service:

.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 }
      }
    }
})

Et un modèle permettant de rendre les deux 'dataNeeded', 'aService' :

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

L'exemple de l'action ici

PLUS ÉTENDRE

Un autre, plus exemple pourrait être le chargement des données.json:

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

Le servcie serait alors

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

Et parent résumé résoudre:

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

Vérifier que ici en action

Je pensais que je pouvais accéder aux données que vous avez indiquées. Cependant, les données ne sont pas injectés comme prévu. Voir mon montage sur la question.
J'ai pris ton exemple de code, et a créé de travail plunker showin que dans l'action. Le seul changement est que je n'ai aucune idée de ce que devrait être la aService.getDataMethod().$promise; donc, dans ce cas, j'ai juste décidé d'utiliser aService.getDataMethod()
Et vous savez quoi, j'ai décidé de même vous montrer comment consommer le retour de la demande de serveur... vérifier l'étendue de réponse de la partie, et du travail exemple
Ce sont de grands exemples. Cependant, je pense que la question que je vais avoir est lié à la façon dont mon contrôleurs sont créés à l'aide de require.js
Je fais de mon mieux pour vous aider et vous révèlent maintenant que votre scénario est différent ... bien ...

OriginalL'auteur Radim Köhler

0

Dans votre app.js
```
  resolve:{
      aService: "aService",
      dataNeeded: function(aService) {
        return aService.getDataMethod().$promise;
      }
   },
```
Dans votre contrôleur :
```
app.controller('ServiceController', [
    'aService',
    'dataNeeded',
    function(aService, dataNeeded ) {
   ...
}];
```
Maintenant, vous avez accès "service" et le "dataNeeded" chargé à l'intérieur de votre controller 'ServiceController'.

Je pensais que je pouvais accéder aux données que vous avez indiquées. Cependant, les données ne sont pas injectés comme prévu. Voir mon montage sur la question.

OriginalL'auteur Nicolas2bert

Vous devez vous connecter pour publier un commentaire.