How to call factory from directive from different file?

Question

i'm developing for the first time with Angular JS and i'm editing a my friend's app. I would call a factory from a directive that is in another file. Here is the code of the involved files:

user-factory.js

(function() {
  'use strict';

  angular.module('myApp.services').factory('currUserService', function() {
    var curruser = '';
    var self = this;
    return {
      setCurrUser: function(user) {
          self.curruser = user;
      },
      getCurrUser: function() {
          return self.curruser;
      },
    }
  });


}());

mainpage-users-box.js

(function() {
  'use strict';

  angular.module('myApp.directives').directive('mainpageUsersBox', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
          users: '=users'
        },
      templateUrl: 'views/templates/mainpage-users-box.directive.html',
      controller: controller,
      controllerAs: 'ctrl'
    };
  });

  function controller($scope) {
    var ctrl = this;

    ctrl.openProfile = function(user) {
      ctrl.currUserService.setCurrUser(user);
    };
  }

  controller.$inject = ['$scope'];

}());

mainpage.html

[...]
<mainpage-users-box users="ctrl.users"></mainpage-users-box>
[...]

As you can see in the second file i want to use .setCurrUser(user) method but i get this error: TypeError: Cannot read property 'setCurrUser of undefined` in the Chrome console.

Can you help me to figure out what could be the reason?

It would be helpful to know how you are including these files in the html. — xkcd149, Dec 28 '15 at 17:03
You may want to have a look at http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript — xkcd149, Dec 28 '15 at 17:19

score 0 · Answer 1 · answered Dec 28 '15 at 17:47

It doesn't seem like you are injecting the service at all:

// Where's the service?  
function controller($scope) {
    var ctrl = this;

    ctrl.openProfile = function(user) {
      ctrl.currUserService.setCurrUser(user);
    };
  }

  // Where's currUserService?
  controller.$inject = ['$scope'];

Would this not work if you change your controller to this instead?

function controller(currUserService) {
    var ctrl = this;

    ctrl.openProfile = function(user) {
      ctrl.currUserService.setCurrUser(user);
    };
  }

  controller.$inject = ['currUserService'];

You seem to be using the controllerAs style of writing controllers. In this case, you don't need the $scope to be injected, unless you are adding $watches.

How to call factory from directive from different file?

1 Answers1