Calling factory from directives controller in Angular.js

Question

I am trying to learn Angular.js, I am using ng-boiler-plate to manage my test application.

However I have ran into a ptoblem and can't see the reason for it not working. Basically I am trying to inject a Factory and then call it from a directives controller.

However when I try to call it I get an error reporting the factory name (in this case dashboardFac) is undefined.

I will include the directive and factory below:

Directive:

angular.module( 'locationSelector', [
'ngBoilerplate.locationFactory'
] )

.directive( 'locationSelector', function() {
return {
    restrict: 'A',
    //template: '<h3>asdfasdfasd</h3>',
    templateUrl : 'components/locationSelector/locationSelector.tpl.html',
    link: function( scope, element, attrs ) {

        console.log("link working ");

        var $input = angular.element( document.querySelector( '#location' ) );

        $input.bind('focus', function() {
            console.log("stay focused son");
        });

    },
    controller: function($scope, dashboardFac, $element){
        $scope.locyTexy = "";
        $scope.api = dashboardFac;
        console.log($scope.api);
        $scope.change = function() {
            console.log("asdfasd");
            dashboardFac.assets.getLocations().then(function(result){  

            });
        };

    }
    };
})

;

Factory:

angular.module( 'ngBoilerplate.locationFactory', [

  ]).factory('dashboardFac', function($http, $q){
    this.assets = {
      getLocations: function(args) {
      var deferred = $q.defer();
      var parmUrl = "will be some url eventually";
      $http.jsonp({
          method: 'GET',
          url: parmUrl
      }).
      success(function(data, status) {
         deferred.resolve(data);
       }).
       error(function(data, status) {
         deferred.reject(data);
       });

      return deferred.promise;
    }
  };
});

Any help would be greatly apprieacted, I have a feeling I am missing something fundamental but hopefully someone can help point me in the right direction.

Thanks in advance.

is that a diffience between a factory and service ? As I had a service set up in a similar way that functioned correctly ? — user1412777
– user1412777, Commented Jun 30, 2014 at 12:23
hi this solved my problem you should have marked as an answer so I can accept. — user1412777
– user1412777, Commented Jun 30, 2014 at 12:30

Krzysztof Safjanowski · Accepted Answer · 2014-06-30 12:23:51Z

3

You must inject dashboardFac factory to directive:

.directive( 'locationSelector', function(dashboardFac) {
[…]
})

answered Jun 30, 2014 at 12:23

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

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

Comments

domokun · Accepted Answer · 2014-06-30 12:28:35Z

You will have to first inject the factory into your directive, as pointed out by Krzysztof Safjanowski

   .directive( 'locationSelector', function(dashboardFac) {
      […]
    })

Then your factory will have to return an Object, like every other factory:

angular.module( 'ngBoilerplate.locationFactory', [])
  .factory('dashboardFac', function($http, $q){
    return {
      assets: {
        getLocations: function (args) {
          var deferred = $q.defer();
          var parmUrl = "will be some url eventually";
          $http.jsonp({
            method: 'GET',
            url: parmUrl
          }).
            success(function (data, status) {
              deferred.resolve(data);
            }).
            error(function (data, status) {
              deferred.reject(data);
            });

          return deferred.promise;
        }
      }
    }
});

Collectives™ on Stack Overflow

Calling factory from directives controller in Angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related