Calling angular service from outside angular code

Question

I'm making table with lots of data (using ag-grid - http://www.ag-grid.com/, but it's not important).

In that table I want to trigger angular service to open modal (with detailed info). Problem is that I don't want to use angular's directive (I have over 10000 records) only to use something like <a on-click="angular.service('modal').method('open-modal').params({id:1})">Open modal</a>

Is it possible?

Answer 1

Calling something angular-related outside it is quite a bad practice (it might also affect the digest/apply loop and not work as intended). Maybe there's an alternative:

If you are inside a controller you can save your service inside a scope variable and then use ng-click to call a function inside your service.

var Controller=function($scope, YourService) {
    $scope.myService=YourService;
};
Controller.$inject=['$scope', 'YourService'];

app.controller('Controller', Controller);

And then, in the HTML:

<a ng-click="myService.method('open-modal').params({id:1})">Open modal</a>

if you still need to use angular-related methods outside it then you should be able to call the "scope()" function this way:

<a on-click="angular.element('#idOfTagWithNgController').scope().myService.method('open-modal').params({id:1})">Open modal</a>

You still need to assign your service to a scope variable to be able to access it this way. idOfTagWithNgController is of course the ID of the HTML tag with the ng-controller attribute (if it has no id you can add it). Mind that this is still bad practice and should be avoided

Answer 2

You can write your own service and register it as a factory, than inject it in your controller and call service method from your controller when triggering ng-click