用纯JavaScript调用angular工厂

Question

I struggled to title this question but basically I'm just starting off with angular and am using ngMaterial. I have a toast created by using an angular factory

app.factory('notify', ['$mdToast', '$animate', function($mdToast, $animate) {
    return {
        showToast: function(msg) {
             var toast = $mdToast.simple()
                  .content(msg)
                  .action('Close')
                  .highlightAction(false)
                  .position('top right');
            $mdToast.show(toast).then(function() {
              //
            });
        }
    }
}]);

This works great if I have a button on the page that activates the toast however I have socket.io running as well with node monitoring redis for updates to pop up that notification. However I can't get it to work as I'm not quite sure how I can call that factory from within here

socket.on('notification.new', function (data) {        
    //call factory here to show toast
    console.log(data);
});

I know if I have it on a controller I can do it by using

angular.element().scope().showToast(data)

But I don't want to create an element just to house the controller to call the function.

Answer 1

What I did to solve this issue is I attached one of the functions inside the controller to the window object. So something like

window.showToast = function(msg) {
             var toast = $mdToast.simple()
                  .content(msg)
                  .action('Close')
                  .highlightAction(false)
                  .position('top right');
            $mdToast.show(toast).then(function() {
              //
            });

Then, from within the socket io listener (or any raw javascript for that matter):

socket.on('notification.new', function (data) {        
    //call factory here to show toast
    window.showToast(data); //or however you'd like
});

And that kind of worked for me. I know this is not the best approach but since this question didn't have any answers at all I thought I'll post a workaround that at least does the job done.

Answer 2

You need to get hold of Angular services to use Angular in a raw Javascript.

Refer to Call Angular JS from legacy code

• angular.element(domElement).scope() to get the current scope for the element
• angular.element(domElement).injector() to get the current app injector
• angular.element(domElement).controller() to get a hold of the ng-controller instance.

In your case use injector service to get hold of your factory.

Update 1

$injector reference