Est-il possible de passer des variables à un contrôleur à partir de l'interface utilisateur.routeur?

J'ai une page structurée avec quelques vues imbriquées, à l'aide de ui.router et je tiens à transmettre certaines données à partir du contrôleur de parent à l'enfant contrôleur, sans injection de services inutiles dans le contrôleur enfant.

Dans mon esprit, quelque chose comme ces derniers, ce serait parfait

        state('home', {
            url: "/home",
            templateUrl: "parts/home.html",
            controller: "FatherController"
        }).
        state('home.child', {
            url: "/child",
            templateUrl: "parts/home/child.html",
            controller: "ChildController",
            params: {$scope.data = $rootScope.someData}
        })

Savez-vous si il existe un moyen de faire cela?

OriginalL'auteur domokun | 2013-11-08

  1. 11

    Si votre enfant de voir est imbriquée dans la vue parent, votre enfant contrôleur hérite automatiquement de la portée parent.

    Vous devriez être en mesure d'accéder à la mère du contrôleur de données directement à partir du contrôleur enfant.

    J'ai essayé, mais la portée est différente chez l'enfant, probablement parce que j'ai un autre contrôleur pour l'enfant
    votre contrôleur devrait être l'héritage du contrôleur de parent. Essayez de vous connecter à $scope.$parent à partir de votre contrôleur enfant.
    Ouais, il est là! Je vais utiliser le $scope.$parent alors, je vous remercie!
    C'est aussi une utilisation typique des événements. Dans le contrôleur de parent $scope.$broadcast('onSomeEventName', myReallyLargeObject); et de l'enfant contrôleur de jeu $scope.$on('onSomeEventName', function(myReallyLargeObject) { //... });

    OriginalL'auteur Joseph Silber

  2. 6

    Bien, je suppose que vous n'avez pas toujours avez le choix de déplacer les données vers un contrôleur de parent ou d'un tel.

    Ma recommandation serait d'utiliser des résolveurs (https://github.com/angular-ui/ui-router/wiki#resolve) faire de la magie.

    Voici un exemple sur la façon dont il peut être fait pour travailler:

    var dataResolver = ['$scope', '$stateParams', 'Service',
    function($scope, $stateParams, Service) {
        Service.get($stateParams.objectId).then( function(obj) {
            $scope.myObject = obj;
            return obj;
        });
     };
 ];

 $stateProvider.state("foo.details", {
     "url": '/foo/:objectId', 
     "resolve": { "data": dataResolver },
     "controller": "SomeController",
     "template": "<ui-view />"
 )

    Et vous comme par magie obtenir le $scope.obj données lorsque le contrôleur est instanciée, quelle que soit la façon.

    De loin la meilleure réponse ici, mais le javascript est mal formé (manquant '})"), et la promesse alors ne retourne rien 😉

    OriginalL'auteur vperron

  3. 1

    Vous pouvez utiliser les Paramètres de la Requête et de l'accès à l'aide de $stateParams

    https://github.com/angular-ui/ui-router/wiki/URL-Routing

    En fait, j'ai déjà vu les paramètres de la requête, mais j'ai besoin d'envoyer un complexe (et relativement gros) objet de mon enfant contrôleur, et non pas quelques paramètres simples. Cela n'aura pas suffit

    OriginalL'auteur Prasad

  4. 0

    Bien, dans mes projets, j'utilise resolve de Angular UI router.

    En gros, lors de l'initialisation de l'état parent, de récupérer des données à partir du serveur, et le stocker dans listItem. Vous pouvez également séparer la logique de faire une requête au serveur à l'aide d'un service et à l'injecter dans config.

    Supposons que je clique quelque part dans le parent de l'état pour ouvrir le nouvel état d'enfant avec un Id comme une chaîne de requête. Puis, nous avons ce id par $stateParams et le filtre à trouver le bon élément dans listItem (à l'aide de Trait de soulignement)

    route.js

    .state('parent', {
    url: '/parent',
    templateUrl: 'parent-template.html',
    controller: 'ParentController',
    resolve: {
        listItem: ['$http', '$stateParams', function ($http, $stateParams) {
            return $http.get({'/GetListItem'}).then(function successCallback(response) {
                return response.data;
            }, function errorCallback(response) {
                return [];
            });
        }]
    }
})
.state('parent.child', {
    url: '/{itemId}',
    templateUrl: 'child-template.html',
    controller: 'ChildController',
    resolve: {
        item: ['$stateParams', 'listItem', function ($stateParams, bundles) {
            return _.findWhere(listItem, { Id: $stateParams.itemId });
        }]
    }
})

    Ensuite, vous pouvez accéder à listItem et item dans le contrôleur comme ci-dessous.

    parent.controller.js

    (function () {
    function ParentController($scope, listItem) {

    }

    ParentController.$inject = ['$scope', 'listItem']

    angular.module('app').controller('parentController', ParentController)
})()

    child.controller.js

    (function () {
    function ChildController($scope, item) {

    }

    ChildController.$inject = ['$scope', 'item']

    angular.module('app').controller('childController', ChildController)
})()

    OriginalL'auteur trungk18