如何$在控制器中注入动态依赖

Yac*_*gui 44 javascript dependency-injection angularjs

我仍然是Angularjs的首次亮相.我想在我的控制器中动态注入服务(我创建的)的依赖项.

但是,当我使用依赖项编写服务时,我收到此错误:

错误:未知提供者:$ windowProvider < - $ window < - base64

这是控制器的代码.

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

此代码有效:

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

    };

});
Run Code Online (Sandbox Code Playgroud)

此代码不起作用:

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

    };

}]);
Run Code Online (Sandbox Code Playgroud)

另一个问题是当服务与控制器在同一模块中时.如果模块有依赖项,我不工作(我的模块配置中有$ routeProvider依赖):

错误:未知提供者:来自mainModule的$ routeProvider

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

JS小提琴

具有依赖关系的相同模块(控制器+服务):http://jsfiddle.net/yrezgui/YedT2/

具有依赖关系的不同模块:http://jsfiddle.net/yrezgui/YedT2/4/

不依赖的不同模块:http://jsfiddle.net/yrezgui/YedT2/5/

Mar*_*cok 62

不要调用angular.injector() - 这会创建一个新的注入器.相反,将已创建的$injector注入到控制器中并使用它:

所以代替:

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

做这个:

var algoController = function($scope, $injector) {
    $scope.base64 = $injector.get('base64');
};
Run Code Online (Sandbox Code Playgroud)

但是大多数时候你应该直接注入你的服务,而不是动态注入你的服务,如下所示:

var algoController = function($scope, base64) {
    $scope.base64 = base64;
};
Run Code Online (Sandbox Code Playgroud)

另请参见AngularJS动态注入范围或控制器