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

Question

我还是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 Fiddles

同一模块有依赖关系(controller + service) : http://jsfiddle.net/yrezgui/YedT2/

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

不同模块无依赖关系 : http://jsfiddle.net/yrezgui/YedT2/5/

- Yacine Rezgui

---

这两个例子都应该可以工作。如果它们不能工作，问题必须在其他地方。如果您能提供 jsFiddle，我们可以修复它，这样我们就有了整个应用程序，而不仅仅是一个小片段。 - Misko Hevery

Answer 1

不要调用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动态注入作用域或控制器

- Mark Rajcok

---

如何获取基于其他服务的Base64编码。 - sms