Dependency Injection of functions with Factories (AngularJS)

Question

I have a few functions that are used in different controllers, and rather than copy and paste it multiple times into the controllers, I want to pull it out and place it in a factory.

However, when I try to call the function in the HTML via Angular {{expressions}} it doesn't work.

Instead, I've made functions inside each of the controllers' $scopes that call the factory's functions so the DOM can read the expressions--but that seems redundant. Is there a way to fix this so I can simply call functions from the factory?

Here was what I originally had tried:

index.html:

<div ng-controller="MyController">
    The rating of this item is: {{MakeGraph.getRating(whichItem)}}<br />
    The votes of this item is: {{MakeGraph.getVotes(whichItem)}}
</div>

MyController.js:

controllers.controller('MyController', ['$scope', 'MakeGraph', '$routeParams', function($scope, MakeGraph, $routeParams){
    $scope.whichItem = $routeParams.itemId;
    //no other reference to MakeGraph here
}])

factory.js:

app.factory('MakeGraph', function(){
    var service = {};

    service.getRating = function(itemNo){
        ...
        return ...;
    };

    service.getVotes = function(itemNo){
        ...
        return ...;
    };

    return service;

});

Instead, I can only get it to work when I change MyController to have something like this:

$scope.getRating = function(){
    return MakeGraph.getRating(itemNo);
};

Can I fix this so I don't have to call the function inside the $scope? Thanks.

a quick way is angular.extend($scope,MyService)

Whisher
– Whisher

2014-06-27 15:00:11 +00:00
Commented Jun 27, 2014 at 15:00 — Whisher
– Whisher, Commented Jun 27, 2014 at 15:00

Jossef Harush Kadouri · Accepted Answer · 2014-06-27 14:11:13Z

3

add $scope.MakeGraph = MakeGraph to your controller

controllers.controller('MyController', ['$scope', 'MakeGraph', '$routeParams', function($scope, MakeGraph, $routeParams){
    $scope.whichItem = $routeParams.itemId;
    $scope.MakeGraph = MakeGraph
}])

then you could access MakeGraph from your view

example:

<a ng-click="MakeGraph.getVotes(12)"> Click me </a>

note that if you return promises in your service, you will probably still need to wrap then in your controller in order to properly handle the .success / .then / .error ... events

edited Jun 27, 2014 at 14:11

answered Jun 27, 2014 at 14:05

Jossef Harush Kadouri

34.5k10 gold badges143 silver badges132 bronze badges

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

1 Comment

user2465164 Over a year ago

So then the DOM only has access to $scope variables within a controller, even if something is passed into the controller (but not specifically labelled on the $scope)? Thanks!

Collectives™ on Stack Overflow

Dependency Injection of functions with Factories (AngularJS)

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related