AngularJS - Unable to use Factory Method inside Directive

Question

I'm having a problem when trying to inject myFactory into myDirective. I need myfactory.myMethod to get a dynamic templateUrl based on a certain event.

That's what I'm trying right now:

(function () {
  'use strict';

  angular
    .module('myApp')
    .directive('myDirective', ['myFactory', function (myFactory) {

      var directive = {
        restrict: 'E',
        templateUrl : function(myFactory){
          if(myFactory.myMethod()){
            return '/app/hello.html'
          }
          return '/app/world.html'
        },
        controller       : 'MyController',
        controllerAs     : 'myCtrl',
        bindToController : true
      };

      return directive;

    }]);

})();

I get the following error

myFactory.myMethod is not a function

I tried looking at various solutions also on SO but I wasn't able to find the proper one.

myFactory is a simple Factory

(function () {
  'use strict';

  angular
    .module('myApp')
    .service('myFactory', function () {

      function myMethod() {
       . . .
      }

      //Or
      var myMethod = function(){
       . . .
      }

      return {
        myMethod: myMethod
      }

    });
})();

How can I fix this?

Thanks in advance.

Done, but it isn't a matter of wrong factory. I don't just find a proper way to inject a Service/Factory into a directive using this directive definition. — AndreaM16
– AndreaM16, Commented Sep 5, 2016 at 9:34
can you show to where are you defining/injecting myApp ? this are separate files? are they load as the time the directive loads? aside of that one thing that you can improve var myMethod = function(){ .... } ; — Jose Rocha
– Jose Rocha, Commented Sep 5, 2016 at 9:35
the injection is fine, the problem came from another thing, I edited my previously comment can you check the new things — Jose Rocha
– Jose Rocha, Commented Sep 5, 2016 at 9:39
I first inject Factories and Services, then Directives. I made that with Gulp. My App module definition looks like (function(){ 'use strict'; angular.module('myApp', [modules . . .]); })(); — AndreaM16
– AndreaM16, Commented Sep 5, 2016 at 9:41

Nguyen Tran · Accepted Answer · 2016-09-05 10:20:21Z

1

I think I found your mistake, that is you passed the service as a parameter in function that return template url templateUrl : function(myFactory){}. It's totally wrong, you cannot use it as a parameter.

To correct it, you need to remove myFactory parameter in the set templateUrl function, like that:

templateUrl : function(){
  if(myFactory.myMethod()){
    return '/app/hello.html'
  }
    return '/app/world.html'
  }

And I see your code is missing creating module: angular.module('myApp', []);

Try yourself in CodePen.

Hope it helps ;)

edited Sep 5, 2016 at 10:20

answered Sep 5, 2016 at 10:14

Nguyen Tran

1,1881 gold badge11 silver badges20 bronze badges

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

2 Comments

AndreaM16 Over a year ago

You are totally right. It was a poor error. +1 and Accepted answer. Thanks.

AndreaM16 Over a year ago

About the code missing, it does not miss, I have it in a separated file.

Collectives™ on Stack Overflow

AngularJS - Unable to use Factory Method inside Directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related