I have the following angularjs service:
angular.module('app.main').factory('MyService', ["$http", function ($http) {
return new function () {
this.GetName = function () {
return "MyName";
};
};
}]);
How can I call GetName function from MyService from legacy js code?
Use angular.injector. Using your code you can do something like the following:
angular.module('main.app', []).factory('MyService', ['$http', function ($http) {
return new function () {
this.GetName = function () {
return "MyName";
};
};
}]);
angular.injector(['ng', 'main.app']).get("MyService").GetName();
Here is the jsfiddle: http://jsfiddle.net/wGeNG/
NOTE - You need to add "ng" as your first module before loading your custom module since your example code depends upon $http provider which is in the ng module.
EDIT - Using get() as in OP's answer but note this code is fetching the service without relying upon the element being bound to the app module "main.app".
angular.injector creates a new injector function, it does not return the one associated with the bootstrapped app." as stated here. I.e., it will inject new $rootScope for your service.
angular.injector(['ng', 'main.app']).get("MyService")()For me it worked with:
angular.element(document.body).injector().get("MyService")
I got 'Unknown provider' error when tried this:
angular.injector(['ng', 'main.app']).get("MyService")
and as i am using jqLite, i can't do
angular.element('*[ng-app]')
because selectors are not supported by jqLite, but i got [Dor Cohen] idea. My directive ng-app is on my body tag, then i can use:
angular.element(document.body).injector().get("MyService")
or
angular.element(document).find('body').injector().get("MyService")
Using the following line helps to execute my method from the angularjs service:
angular.element('*[ng-app]').injector().get("MyService").GetName ();
Here's a utility method that I use :
function getService(name, element) {
element = element || '*[ng-app]';
return angular.element(element).injector().get(name);
}
getSrv("name-of_service", document.body)
