AngularJS: en Utilisant le même contrôleur à plusieurs reprises sur une vue

Je suis fouiller dans Angularjs et a obtenu au point où j'en suis dans mon application au-delà de la simple liste de choses à faire stades.

Un scénario que j'ai, qui doit être commun, c'est d'avoir un contrôleur qui doit être partagée à travers de multiples domaines sur mon point de vue.

Dans mon cas, j'ai un profileController qui je veux utiliser pour obtenir le profil de l'utilisateur à partir du serveur sur chaque charge.

Lors de l'appel de la loadUserProfile de l'intérieur de la profileController j'ai vu qu'il a été appelé 'n'fois (pour le nombre de fois que j'ai référencé le contrôleur de la vue), ce qui est cool, j'ai donc changé le profileController de simplement exposer des variables telles que userProfile et isAuthenticated qui simplement les références des variables que j'ai mis dans le $rootScope. Ces variables sont définies dans un contrôleur qui est chargée qu'une seule fois par page déclarées sur ma <body data-ng-controller="baseController as vm">, cependant, cela ne semble pas fonctionner, et je me demande ce que je suis absent.

Donc obtenir les données à partir de la profileService, mais lors de la mise à jour de l' $rootScope variables, cela ne se reflète pas sur mon point de vue.

Ci-dessous est mon baseController:

(function () {
    'use strict';

    var controllerId = 'baseController';
    angular.module('app.controllers').controller(controllerId, ['$location', 'common', 'authClientSvc', 'profileService', '$rootScope', baseController]);

    function baseController($location, common, authClientSvc, profileService, $rootScope) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);
        var vm = this;

        $rootScope.isAuthenticated = false;
        $rootScope.userProfile = {
            email: '',
            name: '',
            surname: ''
        };


        activate();

        function activate() {
            var promises = [getUserProfile()];
            common.activateController([promises], controllerId)
                .then(function () { log('Activated Secure View'); });
        }

        function getUserProfile() {
            profileService.getProfile('[email protected]').then(function (data) {
                setTimeout(function () {
                    $rootScope.$apply(function () {
                        $rootScope.userProfile = data;
                        $rootScope.isAuthenticated = authClientSvc.isAuthenticated()
                    })
                }, 1000);
            });
        }
    }
})();

Et mon profileController où j'expose le $rootScope variables ci-dessous:

(function () {
    'use strict';

    var controllerId = 'profileController';
    angular.module('app')
        .controller(controllerId, ['common', 'authClientSvc', 'profileService', '$rootScope', profileController]);

    function profileController(common, authClientSvc, profileService, $rootScope) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);

        var vm = this;

        vm.logoutUrl = '/';

        vm.isAuthenticated = $rootScope.isAuthenticated;
        vm.profile = $rootScope.userProfile;

        activate();

        function activate() {
            var promises = [];
            common.activateController(promises, controllerId)
                .then(function () { log('Activated Profile controller'); });
        }

        vm.logOut = function () {
            authClientSvc.logout();
        }
    }
})();

Je ne suis pas sûr de ce qui est faux, parce que dans un violon, je peux clairement voir les données de revenir, et quand je le débogage et de mettre des messages de log dans le baseController après si obtient le profil, qu'il obtient en retour le droit de données, mais pour quelque raison il ne fonctionne pas sur mes éléments. Ci-dessous est un échantillon de la façon dont je l'utilise sur la vue:

<div class="login-info" data-ng-controller="profileController as vm">
    <span ng-switch="vm.isAuthenticated">
        <a ng-switch-when="true" href="javascript:void(0);" id="show-shortcut" data-action="toggleShortcut">
            <img src="/Content/img/avatars/male.png" alt="me" class="online" />
            <span data-localize="{{vm.profile.name}}.{{vm.profile.surname}}">
                {{vm.profile.name}}.{{vm.profile.surname}}
            </span>
            <i class="fa fa-angle-down"></i>
        </a>
        <span ng-switch-when="false">
            <img src="/Content/img/avatars/male.png" alt="guest" class="online" />
            <span data-localize="Guest.user">
                Guest User
            </span>
        </span>
    </span>
</div>

Toute aide serait grandement appréciée, ou même des suggestions sur la façon d'atteindre cet objectif dans une meilleure façon.

Grâce.

InformationsquelleAutor Ryk | 2014-09-09
  1. 12

    Selon Angulaire la documentation:

    Quand un Contrôleur est rattaché à la DOM via le ng-controller directive, Angulaire va instancier un nouvel objet de Contrôleur, en utilisant le Contrôleur spécifié par le constructeur de la fonction. Un nouvel enfant à la portée sera disponible comme un produit injectable paramètre du constructeur du Contrôleur de fonction en tant que $scope.

    Sens: les Contrôleurs sont instanciés lors de la ng-controller directive est attaché à la DOM. Si vous avez deux ng-contrôleurs, alors vous aurez deux instances distinctes de ng-controller.

    Et

    Ne pas utiliser les contrôleurs de:

    • Le partage de code ou de l'état entre les contrôleurs Utilisation angulaire des services de la place.
    • Je suis désolé, mais je ne vois pas en quoi cela est même près à répondre à ma question.
    • Votre approche de l'utilisation des rootScope de partager des données ne fonctionnera que si vous stockez une référence sur la racine de la portée (comme $rootScope.userInfo) et ensuite affecter userInfo vous contrôleurs. Cela fonctionne parce que vous partagez la même userInfo de référence sur plusieurs contrôleurs. Mais si vous avez besoin de partager des données de cette façon, une meilleure pratique consiste à utiliser angulaire des services.
    • Vous n'avez demander des suggestions sur un mieux façon, et j'ai répondu. Vous souhaiterez peut-être modifier votre question de dire que vous êtes pas à la recherche d'une meilleure façon - que vous êtes en question a complètement confus moi
    • Désolé pour ma réponse tardive, j'étais en congé. De toute façon, quand vous faites un peu de recherche sur ma question, vous découvrirez rapidement les suggestions concernant les modèles et anti-modèles, et certains d'entre eux semblent être l'auteur plutôt que d'une bonne pratique, et comme c'est un nouveau cadre, je suis à l'aide, je veux apprendre la bonne façon, d'où ma question, et il n'y a rien de confus au sujet de ma question. Votre réponse est source de confusion. Je vais poster ma réponse à ce que j'ai fini par utiliser dans les prochains jours. Vous n'avez pas à couvrir l'une des méthodes de base pour partager, et comment le faire. ie service vs rootscope
    InformationsquelleAutor pixelbits