Angular.js share service data between directives

Question

I'm working on my first Angular.js application and I'm a bit confused. Currently I have two directives that both need the same data to build up the page. This data is loaded from an external api.

Now currently I have created this factory, which looks like:

(function() {
    var app = angular.module('dataService', []);
    app.factory('dataService', ['$http', function($http) {
        var links = [];

        return {
            getMenu: function() {
                if(links.length > 0) {
                    return links;
                } else {
                    $http.get('http://localhost/server/api.php?ajax=true&action=getCats').success(function(data) {
                        return data;
                    })
                }
            }
        }
    }])
})();

But I'm rather confused how to use this service, obviously if there is a $http request, the return will never be called with the correct data.

In my directive I would use it like this:

(function() {
    // Menu directive
    var app = angular.module('menu', ['dataService']);
    app.directive('menu', ['dataService', function(dataService) {
        return {
            restrict: 'E',
            templateUrl: 'scripts/menu/menu.html',
            controller: function() {
                console.log(dataService.getMenu()); // Return 'undefined'
            },
            controllerAs: 'menuCtrl'
        }
    }])
})();

ms87 · Accepted Answer · 2014-09-24 05:22:35Z

2

Change your service method so that it handles both synchronous and asynchronous scenarios:

  getMenu: function() {
                 var deferred = $q.defer();
                if(links.length > 0) {
                   deferred.resolve(links);
                } else {
                    $http.get('http://localhost/server/api.php?ajax=true&action=getCats').success(function(data) {
                   deferred.resolve(data);
                    })
                }
           return deferred.promise;
   }

Usage:

dataService.getMenu().then(function(data){
  console.log(data);
});

answered Sep 24, 2014 at 5:22

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

8 Comments

woutr_be Over a year ago

Thanks, that seems to work just fine. However, when I use it, am I correct that I should use var self = this; // In then() promise self.data = data?

ms87 Over a year ago

@woutr_be You could just inject $scope in your directive controller function and say $scope.data = data. Tbh I get a bit confused with all that self=this malarkey.

woutr_be Over a year ago

Sorry, I'm a bit confused about how to use $scope, I tried injecting it into my directive controller, but I keep getting an error: Module '$scope' is not available! You either misspelled the module name or forgot to load it. pastebin.com/bDiUfum5

woutr_be Over a year ago

All the documentation about it is so inconsistent and there are different styles all over the place

ms87 Over a year ago

@woutr_be There is no need to inject $scope into the module and directive definition itself, app.directive('menu', ['$scope',, remove $scope from there, just inject it to your controller function. Also remove it from here: angular.module('menu', ['$scope', 'dataService']);

|

Collectives™ on Stack Overflow

Angular.js share service data between directives

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related