web-dev-qa-db-ja.com

コントローラーに動的に依存関係を$ injectする方法

私はまだAngularjsのデビュー者です。コントローラーに（作成した）サービスの依存関係を動的に注入します。

しかし、依存関係を持つサービスをコーディングすると、このエラーが発生しました：

エラー：不明なプロバイダー：$ windowProvider <-$ window <-base64

これはコントローラーのコードです。

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

このコードは機能します：

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

    };

});

このコードは機能しません：

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

    };

}]);

別の問題は、サービスがコントローラーと同じモジュールにある場合です。モジュールに依存関係がある場合、動作しません（モジュール構成に$ routeProvider依存関係があります）：

エラー：不明なプロバイダー：mainModuleからの$ routeProvider

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

JSフィドル

依存関係のある同じモジュール（コントローラー+サービス）： http://jsfiddle.net/yrezgui/YedT2/

依存関係のある異なるモジュール： http://jsfiddle.net/yrezgui/YedT2/4/

依存関係のない異なるモジュール： http://jsfiddle.net/yrezgui/YedT2/5/

javascriptangularjsdependency-injection
44
Yacine Rezgui

Angular.injector（）を呼び出さないでください。これにより、新しいインジェクターが作成されます。代わりに、すでに作成された$injectorをコントローラーに入れて使用します。

代わりに：

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

これを行う：

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

ただし、ほとんどの場合、次のように動的にではなく、直接サービスを注入する必要があります。

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

AngularJSがスコープまたはコントローラーを動的に挿入する も参照してください

62
Mark Rajcok