Search code examples
javascriptangularjsangularjs-scope

how to call a function from module dependency (another module)


I want to create seperate module for pagination, because I will need it to reuse in different modules, but I don't know how to call a function from module dependency (another module)

Here is my main module:

var App = angular.module('search', ['pagination']);

App.controller('MainController', ['$scope', '$pagination' function($scope, $pagination) {
    $scope.testFunction(); //function from pagination module controller
}])

Here is my pagination module:

var App = angular.module('pagination', []);

App.controller('PaginationController', ['$scope', function($scope) {
    $scope.testFunction = function(){
        console.log("pagination module");
    }
}])

I get error:

Error: [$injector:unpr] Unknown provider: $paginationProvider <- $pagination

Solution

  • To share resources across two modules, declare a factory or a service.

    Suppose you have a search module:

    //you inject your pagination module here
    var searchModule = angular.module('search', ['pagination']);
    
    //and you ALSO need to inject your pagination's service into your controller
    searchModule.controller('MainController', ['$scope', 'paginationSvc' function($scope, paginationSvc) {
      //function from pagination module controller
      paginationSvc.testFunction();
    }])
    

    And your pagination module:

    var pagination = angular.module('pagination', []);
    
    //declare your pagination service here
    pagination.factory('PaginationSvc', [function(){
     return {
       testFunction:testFunction
     };
     function testFunction(){
       console.log('This is from pagination module');
    }
    }])
    

    Maybe a little plnkr will help :D