AngularJS calling service function via view

Question

I'm working with Angular(1.x) and just encountered a strange behaviour (which I do not exclude being a result of my code).

Here is the setup:

var module = angular.module('module_name');

module.service('service_name', function() {
    this.function_name = function() { ... }
});

module.controller('controller_name', ['$scope', 'service_name',
    function($scope, service_name) {

        $scope.function_name = function() { ... }
}])

And in the view :

<div ng-controller='controller_name'>
    <button ng-click="function_name()">Test</button>
</div>

The function in service_name is accessible in the controller via service_name.function_name() as expected. But here is the strange behaviour, (once again it occurs in a more complex setting, not saying this portion of code will reproduce the described scenario)

When clicking the button in the view the function called is not the function_name from the controller but the function_name from the service.

Eventhough they have the same name how can the view access a function directly in the service, shouldn't it be limited to its controller scope ?

You are corret, only the function_name from the controller should be getting called. We'll need to see a better code example where you're able to reproduce it in order to pinpoint why — Elliott
– Elliott, Commented Apr 12, 2016 at 15:59

mkkhedawat · Accepted Answer · 2016-04-12 17:57:12Z

2

This simply can not happen unless and until somewhere in your code you write

$scope.function_name = service_name.function_name

Services do not have any local scope.In angular view side on-click event expects function in controller's (read local) scope.

What I suspect in your case is , As JS is all reference, You must be doing something like this in large file :

var dummy = service_name.function_name
...
$scope.function_name = dummy

answered Apr 12, 2016 at 17:57

mkkhedawat

1,7272 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thiout_p Over a year ago

Thank you for this confirmation. I checked the whole controller and function_name is not called once, it is only used from child directives. It is not even referenced as you described it

mkkhedawat Over a year ago

I am working on angular for a year now, pretty sure you it can not happen. If you are still able to reproduce the bug, share the code. I would like to have a look.

pouyada · Accepted Answer · 2018-05-30 09:28:29Z

0

If you do not want to redefine the function name in your controller you can do something like this.

module.service('service_name', function() {
 this.function_name = function() { ... }

 return {
  function_name : function_name
 }
});

module.controller('controller_name', ['$scope', 'service_name',
  function($scope, service_name) {

  $scope.utils = service_name;
}]);

and then in your view call the function directly.

<div ng-controller='controller_name'>
  <button ng-click="utils.function_name()">Test</button>
</div>

That's it.

edited May 30, 2018 at 9:28

answered May 29, 2018 at 16:33

pouyada

3773 silver badges16 bronze badges

Comments

ariezona · Accepted Answer · 2016-04-12 15:59:42Z

-1

It is better to give your controller and service name using for example abcCtrl for controller and abcService for service and so on.

Why, because it will be easier for you to call it. and its not confusing

answered Apr 12, 2016 at 15:59

ariezona

1763 silver badges13 bronze badges

1 Comment

thiout_p Over a year ago

I'm following this standard, the point here is about the service scope being called from a view.

Collectives™ on Stack Overflow

AngularJS calling service function via view

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related