Impossible d'accéder à $ rootScope

162

Le fichier suivant "fonctionne" (dans le sens qu'il ne génère aucune erreur):

<!doctype html>
<html ng-app="modx">
    <script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script> 
    <script>
        angular.module("modx", [], function($routeProvider) {
        });
    </script>
</html>

mais ça

<!doctype html>
<html ng-app="modx">
    <script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
    <script>
        angular.module("modx", [], function($routeProvider, $rootScope) {
        });
    </script>
</html>

donne l'erreur:

Erreur: Fournisseur inconnu: $ rootScope du
fichier source modx : http://code.angularjs.org/angular-1.0.0rc7.js
Ligne: 2491

WTF?

angularjs Malvolio
la source

114

+1 pour WTF comme ligne du bas.

Eliran Malka

Réponses:

307

Vous ne pouvez pas demander par exemple pendant la phase de configuration - vous ne pouvez demander que des fournisseurs.

var app = angular.module('modx', []);

// configure stuff
app.config(function($routeProvider, $locationProvider) {
  // you can inject any provider here
});

// run blocks
app.run(function($rootScope) {
  // you can inject any instance here
});

Voir http://docs.angularjs.org/guide/module pour plus d'informations.

Vojta
la source

Merci, c'est parfaitement logique, mais comment le saviez-vous? Était-ce dans les documents?

Malvolio

143

@Mavolio Non, il est l'un des 3 principaux développeurs.

ChrisOdney

Eh bien, FWIW, il est maintenant dans la documentation, sous la section "Chargement du module et dépendances".

Mark Rajcok

@vojta Mais que faire si j'ai besoin de passer des paramètres de l'extérieur et de les utiliser config? dire le chemin racine dans l'application asp.net? Je ne veux tout simplement pas utiliser de variables globales et je voulais utiliser ng-init='root:<%= myroot %>'et utiliser de la rootvaleur module.config.

vittore

@vittore Je pense que mettre cette configuration "extérieur" dans la fenêtre globale est très bien. Ou avoir un module qui définit tout cela, puis vous le chargez dans votre application - par exemple. angular.module('config', []).constant('appRoot', '/local/js/app');(ce code serait généré par votre serveur (vous pourriez même le générer sous forme de fichier JS, plutôt que de l'insérer dans le fichier html). Ensuite, votre application charge ce module et a donc accès à appRoot.

Vojta

J'ai trouvé le "modèle" suivant très utile:

MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];
function MainCtrl (scope, rootscope, location, thesocket, ...) {

où, MainCtrl est un contrôleur. Je ne suis pas à l'aise de me fier aux noms de paramètres de la fonction Controller en faisant une imitation un-pour-un des instances de peur de changer de nom et de gâcher les choses. Je préfère de loin utiliser explicitement $ inject à cette fin.

Ram Rajamony
la source

C'est chouette; mais comment y accéder MainCtrlcomme ça?

f1lt3r

Je sais que votre commentaire est ancien, mais il vaut la peine de répondre aux questions pour l'avenir. Les modules / contrôleurs peuvent être définis comme ceci afin que vous puissiez y accéder de cette manière:

angular.module('myMod', []).controller('theController', controllerFunction);  controllerFunction.$inject = []; function controllerFunction() {  }

Mutmatt

Je ne vous suggère pas d'utiliser la syntaxe comme vous l'avez fait. AngularJS vous permet d'avoir différentes fonctionnalités que vous voulez ( run, config, service, factory, etc ..), qui sont plus professional.In cette fonction vous ne même pas d'injecter que par vous - même comme

MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];

vous pouvez l'utiliser, comme vous le savez.

Hazarapet Tunanyan
la source