web-dev-qa-db-fra.com

Comment injecter $ une dépendance dynamique dans un contrôleur

Je suis toujours un débutant sur Angularjs. Je veux injecter dynamiquement une dépendance d'un service (que j'ai créé) dans mon contrôleur.

Mais quand je code un service avec des dépendances, j'ai eu cette erreur:

Erreur: fournisseur inconnu: $ windowProvider <- $ window <- base64

Ceci est le code du contrôleur.

var base64 = angular.injector(['servicesModule']).get('base64');
console.log("base64", base64.encode("my text will be encoded"));

Ce code fonctionne:

var servicesModule = angular.module('servicesModule', []);
servicesModule.factory('base64', function() {
    return {

        name: 'base64',
        readonly: false,

        encode: function(input) {
            return window.btoa(input);
        },

        decode: function(input) {
            return window.atob(input);
        }

    };

});

Ce code ne fonctionne pas:

var extModule = angular.module('ext', []);
extModule.factory('base64', ['$window', function($window) {
    return {

        name: 'base64',
        readonly: false,

        encode: function(input) {
            return $window.btoa(input);
        },

        decode: function(input) {
            return $window.atob(input);
        }

    };

}]);

Un autre problème est lorsque le service est dans le même module que le contrôleur. Si le module a des dépendances, je ne travaille pas (j'ai la dépendance $ routeProvider dans ma configuration de module):

Erreur: fournisseur inconnu: $ routeProvider de mainModule

var mainModule = angular.module('main', [],
    function($routeProvider, $locationProvider) {
        //Some routing code
    }
);

JS Fiddles

Même module avec dépendances (contrôleur + service): http://jsfiddle.net/yrezgui/YedT2/

Module différent avec dépendances: http://jsfiddle.net/yrezgui/YedT2/4/

Module différent sans dépendances: http://jsfiddle.net/yrezgui/YedT2/5/

javascriptangularjsdependency-injection
44
Yacine Rezgui

N'appelez pas angular.injector () - cela crée un nouvel injecteur. Au lieu de cela, injectez le $injector Déjà créé dans votre contrôleur et utilisez-le:

Donc au lieu de:

var algoController = function($scope) {
    $scope.base64 = angular.injector(['main']).get('base64');
};

Faites ceci:

var algoController = function($scope, $injector) {
    $scope.base64 = $injector.get('base64');
};

Mais la plupart du temps, vous devez injecter votre service directement, plutôt que dynamiquement, comme ceci:

var algoController = function($scope, base64) {
    $scope.base64 = base64;
};

Voir aussi AngularJS injecte dynamiquement la portée ou le contrôleur

62
Mark Rajcok